@feathery/react 2.45.0 → 2.45.1

package/dist/{fthry_index.BZayCCtc.js → fthry_index.D7WXkc6s.js}

@@ -1,4 +1,4 @@
-import { j as jsxs, _ as __assign, a as jsx, c as __read, I as isEmptyArray, J as toList, K as useThumbnailData, L as __spreadArray, i as imgMaxSizeStyles, l as __awaiter, m as __generator, M as downloadFile, N as CloseIcon, b as iosScrollOnFocus, F as FORM_Z_INDEX, O as justRemove } from './fthry_index.wB8tEXQD.js';
+import { j as jsxs, _ as __assign, a as jsx, c as __read, I as isEmptyArray, J as toList, K as useThumbnailData, L as __spreadArray, i as imgMaxSizeStyles, l as __awaiter, m as __generator, M as downloadFile, N as CloseIcon, b as iosScrollOnFocus, F as FORM_Z_INDEX, O as justRemove } from './fthry_index.Ijv_o9zh.js';
 import { useRef, useState, useEffect } from 'react';
 import 'react/jsx-runtime';
 import 'react-dom/client';

package/dist/{fthry_index.lm4XUzM9.js → fthry_index.DHQdU-Hq.js}

@@ -1,5 +1,5 @@
-import { k as __rest, a as jsx, _ as __assign, j as jsxs, q as Fragment, c as __read, t as featheryDoc, f as fieldValues, z as stringifyWithNull, U as __values, L as __spreadArray } from './fthry_index.wB8tEXQD.js';
-import { useState, useRef, useEffect, useCallback, useMemo } from 'react';
+import { k as __rest, a as jsx, _ as __assign, j as jsxs, c as __read, t as featheryDoc, q as Fragment$1, f as fieldValues, z as stringifyWithNull, U as __values, L as __spreadArray } from './fthry_index.Ijv_o9zh.js';
+import { Fragment, useState, useRef, useEffect, useCallback, useMemo } from 'react';
 import { createPortal } from 'react-dom';
 import 'react/jsx-runtime';
 import 'react-dom/client';
@@ -406,6 +406,39 @@ var confirmDeleteButtonStyle = __assign(__assign({}, buttonStyle), { borderRadiu
         color: colors.white
     } });
 
+// Public, user-targetable class names for the parts of the table element.
+//
+// These are a documented, stable API: form builders write custom CSS against
+// them (e.g. `.feathery-table-cell { ... }`).
+//
+// Treat renames/removals as breaking changes to customer CSS.
+var TABLE_CLASS = {
+    container: 'feathery-table-container',
+    toolbar: 'feathery-table-toolbar',
+    search: 'feathery-table-search',
+    searchInput: 'feathery-table-search-input',
+    addRowButton: 'feathery-table-add-row-button',
+    table: 'feathery-table',
+    header: 'feathery-table-header',
+    headerCell: 'feathery-table-header-cell',
+    sortIcon: 'feathery-table-sort-icon',
+    body: 'feathery-table-body',
+    row: 'feathery-table-row',
+    cell: 'feathery-table-cell',
+    editableCell: 'feathery-table-editable-cell',
+    cellInput: 'feathery-table-cell-input',
+    actionButton: 'feathery-table-action-button',
+    actionMenuButton: 'feathery-table-action-menu-button',
+    actionMenu: 'feathery-table-action-menu',
+    actionMenuItem: 'feathery-table-action-menu-item',
+    deleteButton: 'feathery-table-delete-button',
+    deleteConfirm: 'feathery-table-delete-confirm',
+    pagination: 'feathery-table-pagination',
+    pageButton: 'feathery-table-page-button',
+    pageSelect: 'feathery-table-page-select',
+    empty: 'feathery-table-empty'
+};
+
 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' }) })));
 }
@@ -416,12 +449,12 @@ function Search(_a) {
             e.preventDefault();
         }
     };
-    return (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 })] })));
+    return (jsxs("div", __assign({ className: TABLE_CLASS.search, css: searchWrapperStyle }, { children: [jsx("div", __assign({ css: searchIconWrapperStyle }, { children: jsx(SearchIcon, {}) })), jsx("input", { type: 'text', className: TABLE_CLASS.searchInput, css: searchInputStyle, placeholder: 'Search', value: searchQuery, onChange: function (e) { return onSearchChange(e.target.value); }, onKeyDown: handleKeyDown })] })));
 }
 
 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' })] })));
+    return (jsxs("svg", __assign({ xmlns: 'http://www.w3.org/2000/svg', className: TABLE_CLASS.sortIcon, 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;
@@ -429,7 +462,7 @@ function SortHeader(_a) {
             var isSortable = enableSort;
             var isSorted = sortColumn === column.name;
             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));
+            return (jsx("th", __assign({ scope: 'col', className: TABLE_CLASS.headerCell, "data-feathery-field": column.field_key, 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));
         }) }));
 }
 
@@ -440,17 +473,17 @@ function PageInfo(_a) {
 }
 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" })));
+    return (jsx("button", __assign({ type: 'button', onClick: onClick, disabled: disabled, className: TABLE_CLASS.pageButton, 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" })));
+    return (jsx("button", __assign({ type: 'button', onClick: onClick, disabled: disabled, className: TABLE_CLASS.pageButton, css: __assign(__assign({}, pageButtonNextStyle), (disabled ? pageButtonDisabledStyle : {})) }, { children: "Next" })));
 }
 function OverflowSelect(_a) {
     var pages = _a.pages, onPageChange = _a.onPageChange;
     return (jsxs("select", __assign({ value: '', onChange: function (e) {
             onPageChange(Number(e.target.value));
-        }, "aria-label": 'Go to page', css: overflowSelectStyle }, { children: [jsx("option", __assign({ value: '', disabled: true, hidden: true }, { children: "..." })), pages.map(function (page) { return (jsx("option", __assign({ value: page }, { children: page + 1 }), page)); })] })));
+        }, "aria-label": 'Go to page', className: TABLE_CLASS.pageSelect, css: overflowSelectStyle }, { children: [jsx("option", __assign({ value: '', disabled: true, hidden: true }, { children: "..." })), pages.map(function (page) { return (jsx("option", __assign({ value: page }, { children: page + 1 }), page)); })] })));
 }
 function PageNumbers(_a) {
     var currentPage = _a.currentPage, totalPages = _a.totalPages, onPageChange = _a.onPageChange;
@@ -477,12 +510,12 @@ function PageNumbers(_a) {
     return (jsx(Fragment, { children: items.map(function (item, idx) {
             if (item.type === 'overflow') {
                 if (item.pages.length === 1) {
-                    return (jsx("li", { children: jsx("button", __assign({ type: 'button', onClick: function () { return onPageChange(item.pages[0]); }, css: pageButtonStyle }, { children: item.pages[0] + 1 })) }, "overflow-".concat(idx)));
+                    return (jsx("li", { children: jsx("button", __assign({ type: 'button', onClick: function () { return onPageChange(item.pages[0]); }, className: TABLE_CLASS.pageButton, css: pageButtonStyle }, { children: item.pages[0] + 1 })) }, "overflow-".concat(idx)));
                 }
                 return (jsx("li", { children: jsx(OverflowSelect, { pages: item.pages, onPageChange: onPageChange }) }, "overflow-".concat(idx)));
             }
             var isActive = item.page === currentPage;
-            return (jsx("li", { children: jsx("button", __assign({ type: 'button', onClick: function () { return onPageChange(item.page); }, "aria-current": isActive ? 'page' : undefined, css: isActive
+            return (jsx("li", { children: jsx("button", __assign({ type: 'button', onClick: function () { return onPageChange(item.page); }, "aria-current": isActive ? 'page' : undefined, className: TABLE_CLASS.pageButton, css: isActive
                         ? pageButtonActiveStyle
                         : pageButtonStyle }, { children: item.page + 1 })) }, item.page));
         }) }));
@@ -491,7 +524,7 @@ 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 () {
+    return (jsxs("nav", __assign({ className: TABLE_CLASS.pagination, 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));
                             } }) })] }))] })));
 }
@@ -565,24 +598,24 @@ function ActionButtons(_a) {
     return (jsx("div", __assign({ ref: containerRef, css: actionContainerStyle }, { children: useOverflow ? (jsxs(Fragment, { children: [jsx("button", __assign({ ref: menuButtonRef, type: 'button', disabled: overflowLoader, onClick: function (e) {
                         e.stopPropagation();
                         handleMenuToggle();
-                    }, css: actionIconButtonStyle }, { children: overflowLoader ? (jsx("div", __assign({ style: {
+                    }, className: TABLE_CLASS.actionMenuButton, css: actionIconButtonStyle }, { children: overflowLoader ? (jsx("div", __assign({ style: {
                             height: '16px',
                             width: '16px',
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'center'
                         } }, { children: overflowLoader }))) : (jsx(MenuIcon, {})) })), isMenuOpen &&
-                    createPortal(jsxs("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) {
+                    createPortal(jsxs("div", __assign({ ref: menuRef, className: TABLE_CLASS.actionMenu, css: __assign(__assign({}, actionMenuStyle), { top: "".concat(menuPosition.top, "px"), left: "".concat(menuPosition.left, "px"), transform: 'translateX(-100%)' }) }, { children: [actions.map(function (action, index) {
                                 var disabled = Object.keys(buttonLoaders).length > 0;
                                 return (jsx("button", __assign({ type: 'button', onClick: function (e) {
                                         e.stopPropagation();
                                         handleActionClick(action);
-                                    }, css: actionMenuItemStyle, disabled: disabled }, { children: action.label }), index));
-                            }), canDeleteRows && onDeleteRow && (jsxs(Fragment, { children: [jsx("div", { css: actionMenuSeparatorStyle }), jsx("button", __assign({ type: 'button', onClick: function (e) {
+                                    }, className: TABLE_CLASS.actionMenuItem, css: actionMenuItemStyle, disabled: disabled }, { children: action.label }), index));
+                            }), canDeleteRows && onDeleteRow && (jsxs(Fragment$1, { children: [jsx("div", { css: actionMenuSeparatorStyle }), jsx("button", __assign({ type: 'button', onClick: function (e) {
                                             e.stopPropagation();
                                             setIsMenuOpen(false);
                                             onDeleteRow(rowIndex);
-                                        }, css: actionMenuDeleteItemStyle }, { children: "Delete" }))] }))] })), featheryDoc().body)] })) : (actions.map(function (action, index) {
+                                        }, className: TABLE_CLASS.actionMenuItem, css: actionMenuDeleteItemStyle }, { children: "Delete" }))] }))] })), featheryDoc().body)] })) : (actions.map(function (action, index) {
             var _a;
             var buttonKey = "".concat(tableId, "_").concat(rowIndex, "_").concat(action.label);
             var loader = (_a = buttonLoaders[buttonKey]) === null || _a === void 0 ? void 0 : _a.loader;
@@ -590,7 +623,7 @@ function ActionButtons(_a) {
             return (jsxs("button", __assign({ type: 'button', onClick: function (e) {
                     e.stopPropagation();
                     handleActionClick(action);
-                }, css: actionButtonStyle, disabled: disabled }, { children: [jsx("span", __assign({ style: { visibility: loader ? 'hidden' : 'visible' } }, { children: action.label })), loader && (jsx("div", __assign({ style: {
+                }, className: TABLE_CLASS.actionButton, css: actionButtonStyle, disabled: disabled }, { children: [jsx("span", __assign({ style: { visibility: loader ? 'hidden' : 'visible' } }, { children: action.label })), loader && (jsx("div", __assign({ style: {
                             position: 'absolute',
                             top: '50%',
                             left: '50%',
@@ -603,7 +636,7 @@ function ActionButtons(_a) {
 
 function EmptyState(_a) {
     var hasSearchQuery = _a.hasSearchQuery;
-    return (jsxs("div", __assign({ css: emptyStateContainerStyle }, { children: [hasSearchQuery && (jsx("svg", __assign({ css: {
+    return (jsxs("div", __assign({ className: TABLE_CLASS.empty, css: emptyStateContainerStyle }, { children: [hasSearchQuery && (jsx("svg", __assign({ css: {
                     width: '48px',
                     height: '48px',
                     color: '#9ca3af',
@@ -643,7 +676,7 @@ function DeleteConfirm(_a) {
             doc.removeEventListener('keydown', handleKeyDown);
         };
     }, [onCancel, anchorEl]);
-    return createPortal(jsxs("div", __assign({ ref: popoverRef, role: 'alertdialog', "aria-label": message, css: __assign(__assign({}, confirmPopoverStyle), { top: "".concat(top, "px"), left: "".concat(left, "px"), transform: 'translateX(-100%)' }) }, { children: [jsx("p", __assign({ css: confirmTextStyle }, { children: message })), jsxs("div", __assign({ css: confirmButtonRowStyle }, { children: [jsx("button", __assign({ type: 'button', css: confirmCancelButtonStyle, onClick: function (e) {
+    return createPortal(jsxs("div", __assign({ ref: popoverRef, role: 'alertdialog', "aria-label": message, className: TABLE_CLASS.deleteConfirm, css: __assign(__assign({}, confirmPopoverStyle), { top: "".concat(top, "px"), left: "".concat(left, "px"), transform: 'translateX(-100%)' }) }, { children: [jsx("p", __assign({ css: confirmTextStyle }, { children: message })), jsxs("div", __assign({ css: confirmButtonRowStyle }, { children: [jsx("button", __assign({ type: 'button', css: confirmCancelButtonStyle, onClick: function (e) {
                             e.stopPropagation();
                             onCancel();
                         } }, { children: "Cancel" })), jsx("button", __assign({ type: 'button', css: confirmDeleteButtonStyle, onClick: function (e) {
@@ -739,12 +772,12 @@ function EditableCell(_a) {
         setIsMenuOpen(!isMenuOpen);
     };
     if (isEditing) {
-        return (jsxs("div", __assign({ css: editingCellContentStyle }, { children: [jsx("div", __assign({ css: editingCellSizerStyle }, { children: "".concat(editValue, "\u200B") })), jsx("textarea", { ref: inputRef, value: editValue, onChange: function (e) { return setEditValue(e.target.value); }, onBlur: handleBlur, onKeyDown: handleKeyDown, css: __assign(__assign({}, cellInputStyle), editingCellInputStyle), onClick: function (e) { return e.stopPropagation(); } })] })));
+        return (jsxs("div", __assign({ className: TABLE_CLASS.editableCell, css: editingCellContentStyle }, { children: [jsx("div", __assign({ css: editingCellSizerStyle }, { children: "".concat(editValue, "\u200B") })), jsx("textarea", { ref: inputRef, value: editValue, onChange: function (e) { return setEditValue(e.target.value); }, onBlur: handleBlur, onKeyDown: handleKeyDown, className: TABLE_CLASS.cellInput, css: __assign(__assign({}, cellInputStyle), editingCellInputStyle), onClick: function (e) { return e.stopPropagation(); } })] })));
     }
     if (isEmpty) {
-        return (jsx("span", __assign({ css: clickToEditStyle, onClick: startEditing }, { children: "Click to edit" })));
+        return (jsx("span", __assign({ className: TABLE_CLASS.editableCell, css: clickToEditStyle, onClick: startEditing }, { children: "Click to edit" })));
     }
-    return (jsxs("div", __assign({ css: editableCellContentStyle }, { children: [jsx("span", __assign({ css: editableCellTextStyle }, { children: displayValue })), jsx("button", __assign({ ref: menuButtonRef, type: 'button', "aria-expanded": isMenuOpen, "aria-haspopup": 'menu', css: overflowIconStyle, onClick: handleMenuToggle }, { children: jsx(OverflowIcon, {}) })), isMenuOpen &&
+    return (jsxs("div", __assign({ className: TABLE_CLASS.editableCell, css: editableCellContentStyle }, { children: [jsx("span", __assign({ css: editableCellTextStyle }, { children: displayValue })), jsx("button", __assign({ ref: menuButtonRef, type: 'button', "aria-expanded": isMenuOpen, "aria-haspopup": 'menu', css: overflowIconStyle, onClick: handleMenuToggle }, { children: jsx(OverflowIcon, {}) })), isMenuOpen &&
                 createPortal(jsxs("div", __assign({ ref: menuRef, role: 'menu', css: __assign(__assign({}, actionMenuStyle), { top: "".concat(menuPosition.top, "px"), left: "".concat(menuPosition.left, "px"), transform: 'translateX(-100%)' }) }, { children: [jsx("button", __assign({ type: 'button', role: 'menuitem', css: actionMenuItemStyle, onClick: function (e) {
                                 e.stopPropagation();
                                 startEditing();
@@ -1448,7 +1481,7 @@ function TableElement(_a) {
     ]);
     var showEmptyState = !hasData || !hasSearchResults;
     var showToolbar = enableSearch || showAddRow;
-    return (jsxs("div", __assign({ css: __assign(__assign({}, containerStyle), styles.getTarget('container')) }, { children: [showToolbar && (jsxs("div", __assign({ css: toolbarStyle }, { children: [enableSearch ? (jsx(Search, { searchQuery: searchQuery, onSearchChange: setSearchQuery })) : (jsx("div", {})), showAddRow && (jsx("button", __assign({ type: 'button', css: addRowButtonStyle, onClick: wrappedHandleAddRow }, { children: "+ Add Row" })))] }))), showEmptyState ? (jsx(EmptyState, { hasSearchQuery: searchQuery.trim().length > 0 })) : (jsx("div", __assign({ css: { overflowX: 'auto' } }, { children: 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')) })), showStandaloneDeleteColumn && (jsx("th", { scope: 'col', css: __assign(__assign(__assign({}, thStyle), deleteColumnStyle), styles.getTarget('th')) }))] }) }))), jsxs("tbody", __assign({ css: styles.getTarget('tbody') }, { children: [paginatedRowIndices.map(function (rowIndex) {
+    return (jsxs("div", __assign({ className: TABLE_CLASS.container, css: __assign(__assign({}, containerStyle), styles.getTarget('container')) }, { children: [showToolbar && (jsxs("div", __assign({ className: TABLE_CLASS.toolbar, css: toolbarStyle }, { children: [enableSearch ? (jsx(Search, { searchQuery: searchQuery, onSearchChange: setSearchQuery })) : (jsx("div", {})), showAddRow && (jsx("button", __assign({ type: 'button', className: TABLE_CLASS.addRowButton, css: addRowButtonStyle, onClick: wrappedHandleAddRow }, { children: "+ Add Row" })))] }))), showEmptyState ? (jsx(EmptyState, { hasSearchQuery: searchQuery.trim().length > 0 })) : (jsx("div", __assign({ css: { overflowX: 'auto' } }, { children: jsxs("table", __assign({ className: TABLE_CLASS.table, css: __assign(__assign({}, tableStyle), styles.getTarget('table')) }, { children: [!isTransposed && (jsx("thead", __assign({ className: TABLE_CLASS.header, 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', className: TABLE_CLASS.headerCell, css: __assign(__assign(__assign({}, thStyle), { paddingLeft: 0 }), styles.getTarget('th')) })), showStandaloneDeleteColumn && (jsx("th", { scope: 'col', className: TABLE_CLASS.headerCell, css: __assign(__assign(__assign({}, thStyle), deleteColumnStyle), styles.getTarget('th')) }))] }) }))), jsxs("tbody", __assign({ className: TABLE_CLASS.body, css: styles.getTarget('tbody') }, { children: [paginatedRowIndices.map(function (rowIndex) {
                                     var _a, _b;
                                     var rowData = {};
                                     if (!isTransposed) {
@@ -1468,8 +1501,8 @@ function TableElement(_a) {
                                             });
                                         }
                                     };
-                                    return (jsxs("tr", __assign({ css: __assign(__assign({}, rowStyle), styles.getTarget('tr')), onClick: handleRowClick }, { children: [columns.map(function (column, colIndex) {
-                                                var _a, _b;
+                                    return (jsxs("tr", __assign({ className: TABLE_CLASS.row, css: __assign(__assign({}, rowStyle), styles.getTarget('tr')), onClick: handleRowClick }, { children: [columns.map(function (column, colIndex) {
+                                                var _a, _b, _c;
                                                 var fieldValue = activeFieldValues[column.field_key];
                                                 var cellValue = Array.isArray(fieldValue)
                                                     ? fieldValue[rowIndex]
@@ -1514,26 +1547,34 @@ function TableElement(_a) {
                                                         });
                                                     }
                                                 };
-                                                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 }) }))] }))) : canEdit ? (jsx(EditableCell, { value: cellValue, fieldKey: column.field_key, rowIndex: rowIndex, onEdit: wrappedHandleCellEdit, onClear: handleCellClear })) : ((_b = stringifyWithNull(cellValue)) !== null && _b !== void 0 ? _b : '') }), colIndex));
+                                                // In transposed mode each rendered row holds one
+                                                // original field, so every cell in it belongs to
+                                                // baseColumns[rowIndex]
+                                                var cellFieldKey = isTransposed
+                                                    ? (_a = baseColumns[rowIndex]) === null || _a === void 0 ? void 0 : _a.field_key
+                                                    : column.field_key;
+                                                return (jsx(CellElement, __assign({ className: isFirstColInTranspose
+                                                        ? TABLE_CLASS.headerCell
+                                                        : TABLE_CLASS.cell, "data-feathery-field": cellFieldKey, css: cellCss, onClick: handleCellClick }, (isFirstColInTranspose ? { scope: 'row' } : {}), { children: isFirstColInTranspose && isSortable ? (jsxs("div", __assign({ css: __assign(__assign({}, sortHeaderContentStyle), { justifyContent: 'space-between' }) }, { children: [jsx("span", { children: (_b = stringifyWithNull(cellValue)) !== null && _b !== void 0 ? _b : '' }), jsx("span", __assign({ css: sortIconContainerStyle }, { children: jsx(SortIcon, { isSorted: isSorted, sortDirection: sortDirection }) }))] }))) : canEdit ? (jsx(EditableCell, { value: cellValue, fieldKey: column.field_key, rowIndex: rowIndex, onEdit: wrappedHandleCellEdit, onClear: handleCellClear })) : ((_c = stringifyWithNull(cellValue)) !== null && _c !== void 0 ? _c : '') }), colIndex));
                                             }), !isTransposed && actions.length > 0 && (jsxs("td", __assign({ ref: function (el) {
                                                     if (el)
                                                         actionCellRefs.current.set(rowIndex, el);
                                                     else
                                                         actionCellRefs.current.delete(rowIndex);
-                                                }, css: __assign(__assign(__assign({}, cellStyle), { paddingLeft: 0 }), styles.getTarget('td')) }, { children: [jsx(ActionButtons, { actions: actions, rowIndex: rowIndex, columnData: baseColumns, fieldValues: baseFieldValues, onClick: onClick, tableId: element.id, buttonLoaders: buttonLoaders, canDeleteRows: canDeleteRows && hasOverflowMenu, onDeleteRow: function (ri) { return setDeleteRowIndex(ri); } }), hasOverflowMenu &&
+                                                }, className: TABLE_CLASS.cell, css: __assign(__assign(__assign({}, cellStyle), { paddingLeft: 0 }), styles.getTarget('td')) }, { children: [jsx(ActionButtons, { actions: actions, rowIndex: rowIndex, columnData: baseColumns, fieldValues: baseFieldValues, onClick: onClick, tableId: element.id, buttonLoaders: buttonLoaders, canDeleteRows: canDeleteRows && hasOverflowMenu, onDeleteRow: function (ri) { return setDeleteRowIndex(ri); } }), hasOverflowMenu &&
                                                         canDeleteRows &&
-                                                        deleteRowIndex === rowIndex && (jsx(DeleteConfirm, { anchorEl: (_a = actionCellRefs.current.get(rowIndex)) !== null && _a !== void 0 ? _a : null, onConfirm: function () { return wrappedHandleDeleteRow(rowIndex); }, onCancel: handleCancelDelete }))] }))), showStandaloneDeleteColumn && (jsxs("td", __assign({ css: __assign(__assign({}, deleteColumnStyle), styles.getTarget('td')) }, { children: [jsx("button", __assign({ type: 'button', ref: function (el) {
+                                                        deleteRowIndex === rowIndex && (jsx(DeleteConfirm, { anchorEl: (_a = actionCellRefs.current.get(rowIndex)) !== null && _a !== void 0 ? _a : null, onConfirm: function () { return wrappedHandleDeleteRow(rowIndex); }, onCancel: handleCancelDelete }))] }))), showStandaloneDeleteColumn && (jsxs("td", __assign({ className: TABLE_CLASS.cell, css: __assign(__assign({}, deleteColumnStyle), styles.getTarget('td')) }, { children: [jsx("button", __assign({ type: 'button', ref: function (el) {
                                                             if (el)
                                                                 deleteIconRefs.current.set(rowIndex, el);
                                                             else
                                                                 deleteIconRefs.current.delete(rowIndex);
-                                                        }, css: __assign(__assign({}, deleteIconStyle), (deleteRowIndex === rowIndex && {
+                                                        }, className: TABLE_CLASS.deleteButton, css: __assign(__assign({}, deleteIconStyle), (deleteRowIndex === rowIndex && {
                                                             opacity: 1
                                                         })), onClick: function (e) {
                                                             e.stopPropagation();
                                                             setDeleteRowIndex(deleteRowIndex === rowIndex ? null : rowIndex);
                                                         } }, { children: jsx(TrashIcon, {}) })), deleteRowIndex === rowIndex && (jsx(DeleteConfirm, { anchorEl: (_b = deleteIconRefs.current.get(rowIndex)) !== null && _b !== void 0 ? _b : null, onConfirm: function () { return wrappedHandleDeleteRow(rowIndex); }, onCancel: handleCancelDelete }))] })))] }), 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, tableId: element.id, buttonLoaders: buttonLoaders }) })) }), originalRowIndex)); })] })))] }))] })) }))), !showEmptyState && enablePagination && (jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, totalItems: totalRows, rowsPerPage: rowsPerPage, onPageChange: setCurrentPage }))] })));
+                                }), isTransposed && actions.length > 0 && (jsxs("tr", __assign({ className: TABLE_CLASS.row, css: __assign(__assign({}, rowStyle), styles.getTarget('tr')) }, { children: [jsx("th", { scope: 'row', className: TABLE_CLASS.headerCell, 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({ className: TABLE_CLASS.cell, 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, tableId: element.id, buttonLoaders: buttonLoaders }) })) }), originalRowIndex)); })] })))] }))] })) }))), !showEmptyState && enablePagination && (jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, totalItems: totalRows, rowsPerPage: rowsPerPage, onPageChange: setCurrentPage }))] })));
 }
 
 export { TableElement as default };

package/dist/{fthry_index.C8884q_s.js → fthry_index.DIx5upln.js}

@@ -1,4 +1,4 @@
-import { _ as __assign } from './fthry_index.wB8tEXQD.js';
+import { _ as __assign } from './fthry_index.Ijv_o9zh.js';
 import { i as isPlanEventEnabled } from './fthry_is-plan-event-enabled.mXX0dwl-.js';
 import 'react/jsx-runtime';
 import 'react';

package/dist/{fthry_index.5I1jwuyV.js → fthry_index.DlLRrl91.js}

@@ -1,6 +1,6 @@
-import { l as __awaiter, m as __generator, L as __spreadArray, c as __read, U as __values, p as featheryWindow, V as loadQRScanner, W as throttle, a as jsx, j as jsxs, _ as __assign, q as Fragment, E as ErrorInput, X as qrPromise } from './fthry_index.wB8tEXQD.js';
+import { l as __awaiter, m as __generator, L as __spreadArray, c as __read, U as __values, p as featheryWindow, V as loadQRScanner, W as throttle, a as jsx, j as jsxs, _ as __assign, q as Fragment, E as ErrorInput, X as qrPromise } from './fthry_index.Ijv_o9zh.js';
 import React__default, { useEffect, useCallback } from 'react';
-import { S as SliderStyles, a as Slider } from './fthry_styles.DzxChSu4.js';
+import { S as SliderStyles, a as Slider } from './fthry_styles.C6abImDN.js';
 import 'react/jsx-runtime';
 import 'react-dom/client';
 import 'jszip';

package/dist/{fthry_index.BUJPgzS-.js → fthry_index.DqhzI4MJ.js}

@@ -1,16 +1,16 @@
-import { j as jsxs, _ as __assign, a as jsx, D as DROPDOWN_Z_INDEX, c as __read, u as useBorder, y as getFieldValue, z as stringifyWithNull, h as hoverStylesGuard, b as iosScrollOnFocus, F as FORM_Z_INDEX, r as resetStyles, A as emailPatternStr } from './fthry_index.wB8tEXQD.js';
+import { j as jsxs, _ as __assign, a as jsx, D as DROPDOWN_Z_INDEX, c as __read, u as useBorder, y as getFieldValue, z as stringifyWithNull, h as hoverStylesGuard, b as iosScrollOnFocus, F as FORM_Z_INDEX, r as resetStyles, A as emailPatternStr } from './fthry_index.Ijv_o9zh.js';
 import { memo, useRef, useState } from 'react';
-import { P as Placeholder } from './fthry_Placeholder.C5ezRBA4.js';
-import { I as InlineTooltip } from './fthry_InlineTooltip.DpFz4-7q.js';
-import { O as Overlay } from './fthry_Overlay.D9YOHNgQ.js';
-import { u as useElementSize } from './fthry_useElementSize.BftEHcYN.js';
-import { S as ShowEyeIcon, a as ShowEyeIcon$1 } from './fthry_ShowEyeIcon.CRfFKHIW.js';
-import { I as IMaskInput } from './fthry_input.EFXGfxnr.js';
+import { P as Placeholder } from './fthry_Placeholder.D1RmrK_x.js';
+import { I as InlineTooltip } from './fthry_InlineTooltip.EK3gPvwe.js';
+import { O as Overlay } from './fthry_Overlay.DLfHSitG.js';
+import { u as useElementSize } from './fthry_useElementSize.DMJ4ZQAl.js';
+import { S as ShowEyeIcon, a as ShowEyeIcon$1 } from './fthry_ShowEyeIcon.DIauZsAj.js';
+import { I as IMaskInput } from './fthry_input.D8VQ1Mr4.js';
 import 'react/jsx-runtime';
 import 'react-dom/client';
 import 'jszip';
 import 'react-dom';
-import './fthry_index.BmyShbTY.js';
+import './fthry_index.BWclxwtj.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.DnucOK6E.js → fthry_index.DtfOhhL6.js}

@@ -1,4 +1,4 @@
-import { au as __extends, _ as __assign, k as __rest, L as __spreadArray, l as __awaiter, m as __generator } from './fthry_index.wB8tEXQD.js';
+import { au as __extends, _ as __assign, k as __rest, L as __spreadArray, l as __awaiter, m as __generator } from './fthry_index.Ijv_o9zh.js';
 
 function dset(obj, keys, val) {
 	keys.split && (keys=keys.split('.'));
@@ -5352,7 +5352,7 @@ var Analytics = /** @class */ (function (_super) {
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0: return [4 /*yield*/, import(
-                        /* webpackChunkName: "auto-track" */ './fthry_auto-track.Bo4ek9UM.js')];
+                        /* webpackChunkName: "auto-track" */ './fthry_auto-track._kagu7wX.js')];
                     case 1:
                         autotrack = _b.sent();
                         return [2 /*return*/, (_a = autotrack.link).call.apply(_a, __spreadArray([this], args, false))];
@@ -5371,7 +5371,7 @@ var Analytics = /** @class */ (function (_super) {
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0: return [4 /*yield*/, import(
-                        /* webpackChunkName: "auto-track" */ './fthry_auto-track.Bo4ek9UM.js')];
+                        /* webpackChunkName: "auto-track" */ './fthry_auto-track._kagu7wX.js')];
                     case 1:
                         autotrack = _b.sent();
                         return [2 /*return*/, (_a = autotrack.link).call.apply(_a, __spreadArray([this], args, false))];
@@ -5390,7 +5390,7 @@ var Analytics = /** @class */ (function (_super) {
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0: return [4 /*yield*/, import(
-                        /* webpackChunkName: "auto-track" */ './fthry_auto-track.Bo4ek9UM.js')];
+                        /* webpackChunkName: "auto-track" */ './fthry_auto-track._kagu7wX.js')];
                     case 1:
                         autotrack = _b.sent();
                         return [2 /*return*/, (_a = autotrack.form).call.apply(_a, __spreadArray([this], args, false))];
@@ -5409,7 +5409,7 @@ var Analytics = /** @class */ (function (_super) {
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0: return [4 /*yield*/, import(
-                        /* webpackChunkName: "auto-track" */ './fthry_auto-track.Bo4ek9UM.js')];
+                        /* webpackChunkName: "auto-track" */ './fthry_auto-track._kagu7wX.js')];
                     case 1:
                         autotrack = _b.sent();
                         return [2 /*return*/, (_a = autotrack.form).call.apply(_a, __spreadArray([this], args, false))];
@@ -5564,7 +5564,7 @@ var Analytics = /** @class */ (function (_super) {
                             return [2 /*return*/, []];
                         }
                         return [4 /*yield*/, import(
-                            /* webpackChunkName: "queryString" */ './fthry_index.d6j0MJN7.js')];
+                            /* webpackChunkName: "queryString" */ './fthry_index.uT2AzoIt.js')];
                     case 1:
                         queryString = (_a.sent()).queryString;
                         return [2 /*return*/, queryString(this, query)];
@@ -6607,7 +6607,7 @@ function registerPlugins(writeKey, cdnSettings, analytics, options, pluginLikes,
                     tsubMiddleware = _d;
                     if (!(hasLegacyDestinations(cdnSettings) || legacyIntegrationSources.length > 0)) return [3 /*break*/, 5];
                     return [4 /*yield*/, import(
-                        /* webpackChunkName: "ajs-destination" */ './fthry_index.DZ8TqVOz.js').then(function (mod) {
+                        /* webpackChunkName: "ajs-destination" */ './fthry_index.uMrzFN7W.js').then(function (mod) {
                             return mod.ajsDestinations(writeKey, cdnSettings, analytics.integrations, options, tsubMiddleware, legacyIntegrationSources);
                         })];
                 case 4:
@@ -6620,7 +6620,7 @@ function registerPlugins(writeKey, cdnSettings, analytics, options, pluginLikes,
                     legacyDestinations = _e;
                     if (!cdnSettings.legacyVideoPluginsEnabled) return [3 /*break*/, 8];
                     return [4 /*yield*/, import(
-                        /* webpackChunkName: "legacyVideos" */ './fthry_index.DT62a6WV.js').then(function (mod) {
+                        /* webpackChunkName: "legacyVideos" */ './fthry_index.CQRZTwm-.js').then(function (mod) {
                             return mod.loadLegacyVideoPlugins(analytics);
                         })];
                 case 7:
@@ -6629,7 +6629,7 @@ function registerPlugins(writeKey, cdnSettings, analytics, options, pluginLikes,
                 case 8:
                     if (!((_a = options.plan) === null || _a === void 0 ? void 0 : _a.track)) return [3 /*break*/, 10];
                     return [4 /*yield*/, import(
-                        /* webpackChunkName: "schemaFilter" */ './fthry_index.C8884q_s.js').then(function (mod) {
+                        /* webpackChunkName: "schemaFilter" */ './fthry_index.DIx5upln.js').then(function (mod) {
                             var _a;
                             return mod.schemaFilter((_a = options.plan) === null || _a === void 0 ? void 0 : _a.track, cdnSettings);
                         })];
@@ -6674,7 +6674,7 @@ function registerPlugins(writeKey, cdnSettings, analytics, options, pluginLikes,
                         return enabled;
                     })) return [3 /*break*/, 18];
                     return [4 /*yield*/, import(
-                        /* webpackChunkName: "remoteMiddleware" */ './fthry_index.BAwP5nZO.js').then(function (_a) {
+                        /* webpackChunkName: "remoteMiddleware" */ './fthry_index.CJWAyFVQ.js').then(function (_a) {
                             var remoteMiddlewares = _a.remoteMiddlewares;
                             return __awaiter(_this, void 0, void 0, function () {
                                 var middleware, promises;

package/dist/{fthry_index.CvV7-AsF.js → fthry_index.DzY7raLN.js}

@@ -1,14 +1,14 @@
-import { j as jsxs, _ as __assign, a as jsx, b as iosScrollOnFocus, r as resetStyles } from './fthry_index.wB8tEXQD.js';
+import { j as jsxs, _ as __assign, a as jsx, b as iosScrollOnFocus, r as resetStyles } from './fthry_index.Ijv_o9zh.js';
 import { useRef, useMemo, useEffect } from 'react';
-import { F as FormControl } from './fthry_FormControl.BqvIXsOg.js';
-import { applyCheckableInputStyles, composeCheckableInputStyle, applyHeightWidthMarginByFontSize } from './fthry_index.GDe8zYB6.js';
-import { I as InlineTooltip } from './fthry_InlineTooltip.DpFz4-7q.js';
-import { u as useSalesforceSync } from './fthry_useSalesforceSync.B04DdqRz.js';
+import { F as FormControl } from './fthry_FormControl.CsOU9cE0.js';
+import { applyCheckableInputStyles, composeCheckableInputStyle, applyHeightWidthMarginByFontSize } from './fthry_index.BMjfEu0y.js';
+import { I as InlineTooltip } from './fthry_InlineTooltip.EK3gPvwe.js';
+import { u as useSalesforceSync } from './fthry_useSalesforceSync.C6WG-TQK.js';
 import 'react/jsx-runtime';
 import 'react-dom/client';
 import 'jszip';
 import 'react-dom';
-import './fthry_Overlay.D9YOHNgQ.js';
+import './fthry_Overlay.DLfHSitG.js';
 
 var applyCheckboxGroupStyles = function (element, responsiveStyles) {
     responsiveStyles.addTargets('checkboxGroup');