@feathery/react 2.45.0 → 2.46.0

package/cjs/{fthry_index.r4vMrBms.js → fthry_index.BThAJ1cv.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./fthry_index.Y5sdcMuJ.js');
+var index = require('./fthry_index.CpnN7Soi.js');
 var React = require('react');
-var index$1 = require('./fthry_index.BYK-L6cT.js');
+var index$1 = require('./fthry_index.SWI18Z9b.js');
 require('react/jsx-runtime');
 require('react-dom/client');
 require('jszip');
@@ -1479,7 +1479,7 @@ function SignatureField(_a) {
     React.useEffect(function () {
         if (!global.webfontloaderPromise)
             global.webfontloaderPromise = Promise.resolve().then(function () { return require(
-            /* webpackChunkName: "webfontloader" */ './fthry_webfontloader.BccGkoV1.js'); }).then(function (n) { return n.webfontloader; });
+            /* webpackChunkName: "webfontloader" */ './fthry_webfontloader.BezpEBZR.js'); }).then(function (n) { return n.webfontloader; });
         global.webfontloaderPromise.then(function (WebFont) {
             WebFont.load({ google: { families: ['La Belle Aurore'] } });
         });

package/cjs/{fthry_index.CK7AyNj-.js → fthry_index.BYkt4DUx.js}

@@ -1,15 +1,15 @@
 'use strict';
 
-var index = require('./fthry_index.Y5sdcMuJ.js');
+var index = require('./fthry_index.CpnN7Soi.js');
 var React = require('react');
-var InlineTooltip = require('./fthry_InlineTooltip.HDk3cIr4.js');
-var index$1 = require('./fthry_index.B0i-spOd.js');
-var useSalesforceSync = require('./fthry_useSalesforceSync.HL0c5o2I.js');
+var InlineTooltip = require('./fthry_InlineTooltip.CKULIOlC.js');
+var index$1 = require('./fthry_index.BnetnnAN.js');
+var useSalesforceSync = require('./fthry_useSalesforceSync.niNHr9OK.js');
 require('react/jsx-runtime');
 require('react-dom/client');
 require('jszip');
 require('react-dom');
-require('./fthry_Overlay.AOeUL6CY.js');
+require('./fthry_Overlay.yDSHNtwz.js');
 
 function DropdownField(_a) {
     var _b, _c, _d;

package/cjs/{fthry_index.h6YgYU9U.js → fthry_index.BebTDhWD.js}

@@ -1,9 +1,9 @@
 'use strict';
 
-var index = require('./fthry_index.Y5sdcMuJ.js');
+var index = require('./fthry_index.CpnN7Soi.js');
 var React = require('react');
-var Overlay = require('./fthry_Overlay.AOeUL6CY.js');
-var index$1 = require('./fthry_index.Cyo-XM28.js');
+var Overlay = require('./fthry_Overlay.yDSHNtwz.js');
+var index$1 = require('./fthry_index.Ck590gDe.js');
 require('react/jsx-runtime');
 require('react-dom/client');
 require('jszip');

package/cjs/{fthry_index.B0i-spOd.js → fthry_index.BnetnnAN.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./fthry_index.Y5sdcMuJ.js');
+var index = require('./fthry_index.CpnN7Soi.js');
 
 var ae = [
     { name: 'Abu Dhabi', code: 'AZ' },

package/cjs/{fthry_index.C3_3Pwba.js → fthry_index.BpqwjZna.js}

@@ -1,14 +1,14 @@
 'use strict';
 
-var index = require('./fthry_index.Y5sdcMuJ.js');
+var index = require('./fthry_index.CpnN7Soi.js');
 var React = require('react');
-var InlineTooltip = require('./fthry_InlineTooltip.HDk3cIr4.js');
-var useSalesforceSync = require('./fthry_useSalesforceSync.HL0c5o2I.js');
+var InlineTooltip = require('./fthry_InlineTooltip.CKULIOlC.js');
+var useSalesforceSync = require('./fthry_useSalesforceSync.niNHr9OK.js');
 require('react/jsx-runtime');
 require('react-dom/client');
 require('jszip');
 require('react-dom');
-require('./fthry_Overlay.AOeUL6CY.js');
+require('./fthry_Overlay.yDSHNtwz.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/cjs/{fthry_index.dpt4VGCO.js → fthry_index.BwT0PDuh.js}

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./fthry_index.B490AqCR.js');
-require('./fthry_index.Y5sdcMuJ.js');
+var index = require('./fthry_index.DJLmA3W3.js');
+require('./fthry_index.CpnN7Soi.js');
 require('react/jsx-runtime');
 require('react');
 require('react-dom/client');

package/cjs/{fthry_index.COUEU8oT.js → fthry_index.C-X9zaRK.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./fthry_index.Y5sdcMuJ.js');
+var index = require('./fthry_index.CpnN7Soi.js');
 var isPlanEventEnabled = require('./fthry_is-plan-event-enabled.nMt_kVye.js');
 require('react/jsx-runtime');
 require('react');

package/cjs/{fthry_index.dJ1e0A0z.js → fthry_index.CQ97tAoA.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./fthry_index.Y5sdcMuJ.js');
+var index = require('./fthry_index.CpnN7Soi.js');
 var React = require('react');
-var styles = require('./fthry_styles.CLnNcAaC.js');
+var styles = require('./fthry_styles.LTDDNQMI.js');
 require('react/jsx-runtime');
 require('react-dom/client');
 require('jszip');

package/cjs/{fthry_index.Bz8jOUz8.js → fthry_index.CS8XI36d.js}

@@ -1,11 +1,11 @@
 'use strict';
 
-var index$1 = require('./fthry_index.Y5sdcMuJ.js');
+var index$1 = require('./fthry_index.CpnN7Soi.js');
 var React = require('react');
-var InlineTooltip = require('./fthry_InlineTooltip.HDk3cIr4.js');
-var Placeholder$2 = require('./fthry_Placeholder.B7ueqeue.js');
-var useSalesforceSync = require('./fthry_useSalesforceSync.HL0c5o2I.js');
-var Overlay = require('./fthry_Overlay.AOeUL6CY.js');
+var InlineTooltip = require('./fthry_InlineTooltip.CKULIOlC.js');
+var Placeholder$2 = require('./fthry_Placeholder.BSe-1mcC.js');
+var useSalesforceSync = require('./fthry_useSalesforceSync.niNHr9OK.js');
+var Overlay = require('./fthry_Overlay.yDSHNtwz.js');
 var ReactDOM = require('react-dom');
 require('react/jsx-runtime');
 require('react-dom/client');

package/cjs/{fthry_index.DfW7mZvC.js → fthry_index.CTQbB79c.js}

@@ -1,17 +1,17 @@
 'use strict';
 
-var index$3 = require('./fthry_index.Y5sdcMuJ.js');
+var index$3 = require('./fthry_index.CpnN7Soi.js');
 var React = require('react');
-var Placeholder = require('./fthry_Placeholder.B7ueqeue.js');
-var InlineTooltip = require('./fthry_InlineTooltip.HDk3cIr4.js');
+var Placeholder = require('./fthry_Placeholder.BSe-1mcC.js');
+var InlineTooltip = require('./fthry_InlineTooltip.CKULIOlC.js');
 var clsx = require('./fthry_clsx.BtxeOLZW.js');
 var ReactJSXRuntime = require('react/jsx-runtime');
 var ReactDOM = require('react-dom');
-var input = require('./fthry_input.DVS9sAJL.js');
+var input = require('./fthry_input.Bb-4lDhp.js');
 require('react-dom/client');
 require('jszip');
-require('./fthry_Overlay.AOeUL6CY.js');
-require('./fthry_index.BYK-L6cT.js');
+require('./fthry_Overlay.yDSHNtwz.js');
+require('./fthry_index.SWI18Z9b.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);

package/cjs/{fthry_index.B1B09obP.js → fthry_index.CVv_e5V3.js}

@@ -1,8 +1,8 @@
 'use strict';
 
-var index = require('./fthry_index.Y5sdcMuJ.js');
+var index = require('./fthry_index.CpnN7Soi.js');
 var React = require('react');
-var styles = require('./fthry_styles.CLnNcAaC.js');
+var styles = require('./fthry_styles.LTDDNQMI.js');
 require('react/jsx-runtime');
 require('react-dom/client');
 require('jszip');

package/cjs/{fthry_index.B4GgIpQf.js → fthry_index.CcvbBuo_.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./fthry_index.Y5sdcMuJ.js');
+var index = require('./fthry_index.CpnN7Soi.js');
 var React = require('react');
 var ReactDOM = require('react-dom');
 require('react/jsx-runtime');
@@ -408,6 +408,39 @@ var confirmDeleteButtonStyle = index.__assign(index.__assign({}, buttonStyle), {
         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 (index.jsx("svg", index.__assign({ css: searchIconStyle, fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor', strokeWidth: 2 }, { children: index.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' }) })));
 }
@@ -418,20 +451,20 @@ function Search(_a) {
             e.preventDefault();
         }
     };
-    return (index.jsxs("div", index.__assign({ css: searchWrapperStyle }, { children: [index.jsx("div", index.__assign({ css: searchIconWrapperStyle }, { children: index.jsx(SearchIcon, {}) })), index.jsx("input", { type: 'text', css: searchInputStyle, placeholder: 'Search', value: searchQuery, onChange: function (e) { return onSearchChange(e.target.value); }, onKeyDown: handleKeyDown })] })));
+    return (index.jsxs("div", index.__assign({ className: TABLE_CLASS.search, css: searchWrapperStyle }, { children: [index.jsx("div", index.__assign({ css: searchIconWrapperStyle }, { children: index.jsx(SearchIcon, {}) })), index.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 (index.jsxs("svg", index.__assign({ xmlns: 'http://www.w3.org/2000/svg', viewBox: '0 0 24 24', fill: 'none', "aria-hidden": 'true' }, { children: [index.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' }), index.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 (index.jsxs("svg", index.__assign({ xmlns: 'http://www.w3.org/2000/svg', className: TABLE_CLASS.sortIcon, viewBox: '0 0 24 24', fill: 'none', "aria-hidden": 'true' }, { children: [index.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' }), index.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 (index.jsx(index.Fragment, { children: columns.map(function (column, index$1) {
+    return (index.jsx(React.Fragment, { children: columns.map(function (column, index$1) {
             var isSortable = enableSort;
             var isSorted = sortColumn === column.name;
             var isFirstColumn = index$1 === 0;
-            return (index.jsx("th", index.__assign({ scope: 'col', onClick: function () { return isSortable && onSort(column.name); }, css: index.__assign(index.__assign(index.__assign(index.__assign({}, thStyle), (isFirstColumn ? {} : { paddingLeft: 0 })), styles.getTarget('th')), (isSortable ? { cursor: 'pointer' } : {})) }, { children: index.jsxs("div", index.__assign({ css: sortHeaderContentStyle }, { children: [index.jsx("span", { children: column.name }), isSortable && (index.jsx("span", index.__assign({ css: sortIconContainerStyle }, { children: index.jsx(SortIcon, { isSorted: isSorted, sortDirection: sortDirection }) })))] })) }), index$1));
+            return (index.jsx("th", index.__assign({ scope: 'col', className: TABLE_CLASS.headerCell, "data-feathery-field": column.field_key, onClick: function () { return isSortable && onSort(column.name); }, css: index.__assign(index.__assign(index.__assign(index.__assign({}, thStyle), (isFirstColumn ? {} : { paddingLeft: 0 })), styles.getTarget('th')), (isSortable ? { cursor: 'pointer' } : {})) }, { children: index.jsxs("div", index.__assign({ css: sortHeaderContentStyle }, { children: [index.jsx("span", { children: column.name }), isSortable && (index.jsx("span", index.__assign({ css: sortIconContainerStyle }, { children: index.jsx(SortIcon, { isSorted: isSorted, sortDirection: sortDirection }) })))] })) }), index$1));
         }) }));
 }
 
@@ -442,17 +475,17 @@ function PageInfo(_a) {
 }
 function PreviousButton(_a) {
     var disabled = _a.disabled, onClick = _a.onClick;
-    return (index.jsx("button", index.__assign({ type: 'button', onClick: onClick, disabled: disabled, css: index.__assign(index.__assign({}, pageButtonPrevStyle), (disabled ? pageButtonDisabledStyle : {})) }, { children: "Previous" })));
+    return (index.jsx("button", index.__assign({ type: 'button', onClick: onClick, disabled: disabled, className: TABLE_CLASS.pageButton, css: index.__assign(index.__assign({}, pageButtonPrevStyle), (disabled ? pageButtonDisabledStyle : {})) }, { children: "Previous" })));
 }
 function NextButton(_a) {
     var disabled = _a.disabled, onClick = _a.onClick;
-    return (index.jsx("button", index.__assign({ type: 'button', onClick: onClick, disabled: disabled, css: index.__assign(index.__assign({}, pageButtonNextStyle), (disabled ? pageButtonDisabledStyle : {})) }, { children: "Next" })));
+    return (index.jsx("button", index.__assign({ type: 'button', onClick: onClick, disabled: disabled, className: TABLE_CLASS.pageButton, css: index.__assign(index.__assign({}, pageButtonNextStyle), (disabled ? pageButtonDisabledStyle : {})) }, { children: "Next" })));
 }
 function OverflowSelect(_a) {
     var pages = _a.pages, onPageChange = _a.onPageChange;
     return (index.jsxs("select", index.__assign({ value: '', onChange: function (e) {
             onPageChange(Number(e.target.value));
-        }, "aria-label": 'Go to page', css: overflowSelectStyle }, { children: [index.jsx("option", index.__assign({ value: '', disabled: true, hidden: true }, { children: "..." })), pages.map(function (page) { return (index.jsx("option", index.__assign({ value: page }, { children: page + 1 }), page)); })] })));
+        }, "aria-label": 'Go to page', className: TABLE_CLASS.pageSelect, css: overflowSelectStyle }, { children: [index.jsx("option", index.__assign({ value: '', disabled: true, hidden: true }, { children: "..." })), pages.map(function (page) { return (index.jsx("option", index.__assign({ value: page }, { children: page + 1 }), page)); })] })));
 }
 function PageNumbers(_a) {
     var currentPage = _a.currentPage, totalPages = _a.totalPages, onPageChange = _a.onPageChange;
@@ -476,15 +509,15 @@ function PageNumbers(_a) {
         }
         items.push({ type: 'page', page: page });
     }
-    return (index.jsx(index.Fragment, { children: items.map(function (item, idx) {
+    return (index.jsx(React.Fragment, { children: items.map(function (item, idx) {
             if (item.type === 'overflow') {
                 if (item.pages.length === 1) {
-                    return (index.jsx("li", { children: index.jsx("button", index.__assign({ type: 'button', onClick: function () { return onPageChange(item.pages[0]); }, css: pageButtonStyle }, { children: item.pages[0] + 1 })) }, "overflow-".concat(idx)));
+                    return (index.jsx("li", { children: index.jsx("button", index.__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 (index.jsx("li", { children: index.jsx(OverflowSelect, { pages: item.pages, onPageChange: onPageChange }) }, "overflow-".concat(idx)));
             }
             var isActive = item.page === currentPage;
-            return (index.jsx("li", { children: index.jsx("button", index.__assign({ type: 'button', onClick: function () { return onPageChange(item.page); }, "aria-current": isActive ? 'page' : undefined, css: isActive
+            return (index.jsx("li", { children: index.jsx("button", index.__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));
         }) }));
@@ -493,7 +526,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 (index.jsxs("nav", index.__assign({ css: navStyle, "aria-label": 'Table navigation' }, { children: [index.jsx(PageInfo, { currentPage: currentPage, totalItems: totalItems, rowsPerPage: rowsPerPage }), index.jsxs("ul", index.__assign({ css: paginationListStyle }, { children: [index.jsx("li", { children: index.jsx(PreviousButton, { disabled: currentPage === 0, onClick: function () { return onPageChange(Math.max(0, currentPage - 1)); } }) }), index.jsx(PageNumbers, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange }), index.jsx("li", { children: index.jsx(NextButton, { disabled: currentPage >= totalPages - 1, onClick: function () {
+    return (index.jsxs("nav", index.__assign({ className: TABLE_CLASS.pagination, css: navStyle, "aria-label": 'Table navigation' }, { children: [index.jsx(PageInfo, { currentPage: currentPage, totalItems: totalItems, rowsPerPage: rowsPerPage }), index.jsxs("ul", index.__assign({ css: paginationListStyle }, { children: [index.jsx("li", { children: index.jsx(PreviousButton, { disabled: currentPage === 0, onClick: function () { return onPageChange(Math.max(0, currentPage - 1)); } }) }), index.jsx(PageNumbers, { currentPage: currentPage, totalPages: totalPages, onPageChange: onPageChange }), index.jsx("li", { children: index.jsx(NextButton, { disabled: currentPage >= totalPages - 1, onClick: function () {
                                 onPageChange(Math.min(totalPages - 1, currentPage + 1));
                             } }) })] }))] })));
 }
@@ -564,27 +597,27 @@ function ActionButtons(_a) {
         var buttonKey = "".concat(tableId, "_").concat(rowIndex, "_").concat(action.label);
         return (_a = buttonLoaders[buttonKey]) === null || _a === void 0 ? void 0 : _a.loader;
     })) === null || _b === void 0 ? void 0 : _b.label)]) === null || _c === void 0 ? void 0 : _c.loader) !== null && _d !== void 0 ? _d : null;
-    return (index.jsx("div", index.__assign({ ref: containerRef, css: actionContainerStyle }, { children: useOverflow ? (index.jsxs(index.Fragment, { children: [index.jsx("button", index.__assign({ ref: menuButtonRef, type: 'button', disabled: overflowLoader, onClick: function (e) {
+    return (index.jsx("div", index.__assign({ ref: containerRef, css: actionContainerStyle }, { children: useOverflow ? (index.jsxs(React.Fragment, { children: [index.jsx("button", index.__assign({ ref: menuButtonRef, type: 'button', disabled: overflowLoader, onClick: function (e) {
                         e.stopPropagation();
                         handleMenuToggle();
-                    }, css: actionIconButtonStyle }, { children: overflowLoader ? (index.jsx("div", index.__assign({ style: {
+                    }, className: TABLE_CLASS.actionMenuButton, css: actionIconButtonStyle }, { children: overflowLoader ? (index.jsx("div", index.__assign({ style: {
                             height: '16px',
                             width: '16px',
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'center'
                         } }, { children: overflowLoader }))) : (index.jsx(MenuIcon, {})) })), isMenuOpen &&
-                    ReactDOM.createPortal(index.jsxs("div", index.__assign({ ref: menuRef, css: index.__assign(index.__assign({}, actionMenuStyle), { top: "".concat(menuPosition.top, "px"), left: "".concat(menuPosition.left, "px"), transform: 'translateX(-100%)' }) }, { children: [actions.map(function (action, index$1) {
+                    ReactDOM.createPortal(index.jsxs("div", index.__assign({ ref: menuRef, className: TABLE_CLASS.actionMenu, css: index.__assign(index.__assign({}, actionMenuStyle), { top: "".concat(menuPosition.top, "px"), left: "".concat(menuPosition.left, "px"), transform: 'translateX(-100%)' }) }, { children: [actions.map(function (action, index$1) {
                                 var disabled = Object.keys(buttonLoaders).length > 0;
                                 return (index.jsx("button", index.__assign({ type: 'button', onClick: function (e) {
                                         e.stopPropagation();
                                         handleActionClick(action);
-                                    }, css: actionMenuItemStyle, disabled: disabled }, { children: action.label }), index$1));
+                                    }, className: TABLE_CLASS.actionMenuItem, css: actionMenuItemStyle, disabled: disabled }, { children: action.label }), index$1));
                             }), canDeleteRows && onDeleteRow && (index.jsxs(index.Fragment, { children: [index.jsx("div", { css: actionMenuSeparatorStyle }), index.jsx("button", index.__assign({ type: 'button', onClick: function (e) {
                                             e.stopPropagation();
                                             setIsMenuOpen(false);
                                             onDeleteRow(rowIndex);
-                                        }, css: actionMenuDeleteItemStyle }, { children: "Delete" }))] }))] })), index.featheryDoc().body)] })) : (actions.map(function (action, index$1) {
+                                        }, className: TABLE_CLASS.actionMenuItem, css: actionMenuDeleteItemStyle }, { children: "Delete" }))] }))] })), index.featheryDoc().body)] })) : (actions.map(function (action, index$1) {
             var _a;
             var buttonKey = "".concat(tableId, "_").concat(rowIndex, "_").concat(action.label);
             var loader = (_a = buttonLoaders[buttonKey]) === null || _a === void 0 ? void 0 : _a.loader;
@@ -592,7 +625,7 @@ function ActionButtons(_a) {
             return (index.jsxs("button", index.__assign({ type: 'button', onClick: function (e) {
                     e.stopPropagation();
                     handleActionClick(action);
-                }, css: actionButtonStyle, disabled: disabled }, { children: [index.jsx("span", index.__assign({ style: { visibility: loader ? 'hidden' : 'visible' } }, { children: action.label })), loader && (index.jsx("div", index.__assign({ style: {
+                }, className: TABLE_CLASS.actionButton, css: actionButtonStyle, disabled: disabled }, { children: [index.jsx("span", index.__assign({ style: { visibility: loader ? 'hidden' : 'visible' } }, { children: action.label })), loader && (index.jsx("div", index.__assign({ style: {
                             position: 'absolute',
                             top: '50%',
                             left: '50%',
@@ -605,7 +638,7 @@ function ActionButtons(_a) {
 
 function EmptyState(_a) {
     var hasSearchQuery = _a.hasSearchQuery;
-    return (index.jsxs("div", index.__assign({ css: emptyStateContainerStyle }, { children: [hasSearchQuery && (index.jsx("svg", index.__assign({ css: {
+    return (index.jsxs("div", index.__assign({ className: TABLE_CLASS.empty, css: emptyStateContainerStyle }, { children: [hasSearchQuery && (index.jsx("svg", index.__assign({ css: {
                     width: '48px',
                     height: '48px',
                     color: '#9ca3af',
@@ -645,7 +678,7 @@ function DeleteConfirm(_a) {
             doc.removeEventListener('keydown', handleKeyDown);
         };
     }, [onCancel, anchorEl]);
-    return ReactDOM.createPortal(index.jsxs("div", index.__assign({ ref: popoverRef, role: 'alertdialog', "aria-label": message, css: index.__assign(index.__assign({}, confirmPopoverStyle), { top: "".concat(top, "px"), left: "".concat(left, "px"), transform: 'translateX(-100%)' }) }, { children: [index.jsx("p", index.__assign({ css: confirmTextStyle }, { children: message })), index.jsxs("div", index.__assign({ css: confirmButtonRowStyle }, { children: [index.jsx("button", index.__assign({ type: 'button', css: confirmCancelButtonStyle, onClick: function (e) {
+    return ReactDOM.createPortal(index.jsxs("div", index.__assign({ ref: popoverRef, role: 'alertdialog', "aria-label": message, className: TABLE_CLASS.deleteConfirm, css: index.__assign(index.__assign({}, confirmPopoverStyle), { top: "".concat(top, "px"), left: "".concat(left, "px"), transform: 'translateX(-100%)' }) }, { children: [index.jsx("p", index.__assign({ css: confirmTextStyle }, { children: message })), index.jsxs("div", index.__assign({ css: confirmButtonRowStyle }, { children: [index.jsx("button", index.__assign({ type: 'button', css: confirmCancelButtonStyle, onClick: function (e) {
                             e.stopPropagation();
                             onCancel();
                         } }, { children: "Cancel" })), index.jsx("button", index.__assign({ type: 'button', css: confirmDeleteButtonStyle, onClick: function (e) {
@@ -741,12 +774,12 @@ function EditableCell(_a) {
         setIsMenuOpen(!isMenuOpen);
     };
     if (isEditing) {
-        return (index.jsxs("div", index.__assign({ css: editingCellContentStyle }, { children: [index.jsx("div", index.__assign({ css: editingCellSizerStyle }, { children: "".concat(editValue, "\u200B") })), index.jsx("textarea", { ref: inputRef, value: editValue, onChange: function (e) { return setEditValue(e.target.value); }, onBlur: handleBlur, onKeyDown: handleKeyDown, css: index.__assign(index.__assign({}, cellInputStyle), editingCellInputStyle), onClick: function (e) { return e.stopPropagation(); } })] })));
+        return (index.jsxs("div", index.__assign({ className: TABLE_CLASS.editableCell, css: editingCellContentStyle }, { children: [index.jsx("div", index.__assign({ css: editingCellSizerStyle }, { children: "".concat(editValue, "\u200B") })), index.jsx("textarea", { ref: inputRef, value: editValue, onChange: function (e) { return setEditValue(e.target.value); }, onBlur: handleBlur, onKeyDown: handleKeyDown, className: TABLE_CLASS.cellInput, css: index.__assign(index.__assign({}, cellInputStyle), editingCellInputStyle), onClick: function (e) { return e.stopPropagation(); } })] })));
     }
     if (isEmpty) {
-        return (index.jsx("span", index.__assign({ css: clickToEditStyle, onClick: startEditing }, { children: "Click to edit" })));
+        return (index.jsx("span", index.__assign({ className: TABLE_CLASS.editableCell, css: clickToEditStyle, onClick: startEditing }, { children: "Click to edit" })));
     }
-    return (index.jsxs("div", index.__assign({ css: editableCellContentStyle }, { children: [index.jsx("span", index.__assign({ css: editableCellTextStyle }, { children: displayValue })), index.jsx("button", index.__assign({ ref: menuButtonRef, type: 'button', "aria-expanded": isMenuOpen, "aria-haspopup": 'menu', css: overflowIconStyle, onClick: handleMenuToggle }, { children: index.jsx(OverflowIcon, {}) })), isMenuOpen &&
+    return (index.jsxs("div", index.__assign({ className: TABLE_CLASS.editableCell, css: editableCellContentStyle }, { children: [index.jsx("span", index.__assign({ css: editableCellTextStyle }, { children: displayValue })), index.jsx("button", index.__assign({ ref: menuButtonRef, type: 'button', "aria-expanded": isMenuOpen, "aria-haspopup": 'menu', css: overflowIconStyle, onClick: handleMenuToggle }, { children: index.jsx(OverflowIcon, {}) })), isMenuOpen &&
                 ReactDOM.createPortal(index.jsxs("div", index.__assign({ ref: menuRef, role: 'menu', css: index.__assign(index.__assign({}, actionMenuStyle), { top: "".concat(menuPosition.top, "px"), left: "".concat(menuPosition.left, "px"), transform: 'translateX(-100%)' }) }, { children: [index.jsx("button", index.__assign({ type: 'button', role: 'menuitem', css: actionMenuItemStyle, onClick: function (e) {
                                 e.stopPropagation();
                                 startEditing();
@@ -1450,7 +1483,7 @@ function TableElement(_a) {
     ]);
     var showEmptyState = !hasData || !hasSearchResults;
     var showToolbar = enableSearch || showAddRow;
-    return (index.jsxs("div", index.__assign({ css: index.__assign(index.__assign({}, containerStyle), styles.getTarget('container')) }, { children: [showToolbar && (index.jsxs("div", index.__assign({ css: toolbarStyle }, { children: [enableSearch ? (index.jsx(Search, { searchQuery: searchQuery, onSearchChange: setSearchQuery })) : (index.jsx("div", {})), showAddRow && (index.jsx("button", index.__assign({ type: 'button', css: addRowButtonStyle, onClick: wrappedHandleAddRow }, { children: "+ Add Row" })))] }))), showEmptyState ? (index.jsx(EmptyState, { hasSearchQuery: searchQuery.trim().length > 0 })) : (index.jsx("div", index.__assign({ css: { overflowX: 'auto' } }, { children: index.jsxs("table", index.__assign({ css: index.__assign(index.__assign({}, tableStyle), styles.getTarget('table')) }, { children: [!isTransposed && (index.jsx("thead", index.__assign({ css: theadStyle }, { children: index.jsxs("tr", { children: [index.jsx(SortHeader, { columns: columns, enableSort: enableSort, sortColumn: sortColumn, sortDirection: sortDirection, onSort: handleSort, styles: styles }), actions.length > 0 && (index.jsx("th", { scope: 'col', css: index.__assign(index.__assign(index.__assign({}, thStyle), { paddingLeft: 0 }), styles.getTarget('th')) })), showStandaloneDeleteColumn && (index.jsx("th", { scope: 'col', css: index.__assign(index.__assign(index.__assign({}, thStyle), deleteColumnStyle), styles.getTarget('th')) }))] }) }))), index.jsxs("tbody", index.__assign({ css: styles.getTarget('tbody') }, { children: [paginatedRowIndices.map(function (rowIndex) {
+    return (index.jsxs("div", index.__assign({ className: TABLE_CLASS.container, css: index.__assign(index.__assign({}, containerStyle), styles.getTarget('container')) }, { children: [showToolbar && (index.jsxs("div", index.__assign({ className: TABLE_CLASS.toolbar, css: toolbarStyle }, { children: [enableSearch ? (index.jsx(Search, { searchQuery: searchQuery, onSearchChange: setSearchQuery })) : (index.jsx("div", {})), showAddRow && (index.jsx("button", index.__assign({ type: 'button', className: TABLE_CLASS.addRowButton, css: addRowButtonStyle, onClick: wrappedHandleAddRow }, { children: "+ Add Row" })))] }))), showEmptyState ? (index.jsx(EmptyState, { hasSearchQuery: searchQuery.trim().length > 0 })) : (index.jsx("div", index.__assign({ css: { overflowX: 'auto' } }, { children: index.jsxs("table", index.__assign({ className: TABLE_CLASS.table, css: index.__assign(index.__assign({}, tableStyle), styles.getTarget('table')) }, { children: [!isTransposed && (index.jsx("thead", index.__assign({ className: TABLE_CLASS.header, css: theadStyle }, { children: index.jsxs("tr", { children: [index.jsx(SortHeader, { columns: columns, enableSort: enableSort, sortColumn: sortColumn, sortDirection: sortDirection, onSort: handleSort, styles: styles }), actions.length > 0 && (index.jsx("th", { scope: 'col', className: TABLE_CLASS.headerCell, css: index.__assign(index.__assign(index.__assign({}, thStyle), { paddingLeft: 0 }), styles.getTarget('th')) })), showStandaloneDeleteColumn && (index.jsx("th", { scope: 'col', className: TABLE_CLASS.headerCell, css: index.__assign(index.__assign(index.__assign({}, thStyle), deleteColumnStyle), styles.getTarget('th')) }))] }) }))), index.jsxs("tbody", index.__assign({ className: TABLE_CLASS.body, css: styles.getTarget('tbody') }, { children: [paginatedRowIndices.map(function (rowIndex) {
                                     var _a, _b;
                                     var rowData = {};
                                     if (!isTransposed) {
@@ -1470,8 +1503,8 @@ function TableElement(_a) {
                                             });
                                         }
                                     };
-                                    return (index.jsxs("tr", index.__assign({ css: index.__assign(index.__assign({}, rowStyle), styles.getTarget('tr')), onClick: handleRowClick }, { children: [columns.map(function (column, colIndex) {
-                                                var _a, _b;
+                                    return (index.jsxs("tr", index.__assign({ className: TABLE_CLASS.row, css: index.__assign(index.__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]
@@ -1516,26 +1549,34 @@ function TableElement(_a) {
                                                         });
                                                     }
                                                 };
-                                                return (index.jsx(CellElement, index.__assign({ css: cellCss, onClick: handleCellClick }, (isFirstColInTranspose ? { scope: 'row' } : {}), { children: isFirstColInTranspose && isSortable ? (index.jsxs("div", index.__assign({ css: index.__assign(index.__assign({}, sortHeaderContentStyle), { justifyContent: 'space-between' }) }, { children: [index.jsx("span", { children: (_a = index.stringifyWithNull(cellValue)) !== null && _a !== void 0 ? _a : '' }), index.jsx("span", index.__assign({ css: sortIconContainerStyle }, { children: index.jsx(SortIcon, { isSorted: isSorted, sortDirection: sortDirection }) }))] }))) : canEdit ? (index.jsx(EditableCell, { value: cellValue, fieldKey: column.field_key, rowIndex: rowIndex, onEdit: wrappedHandleCellEdit, onClear: handleCellClear })) : ((_b = index.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 (index.jsx(CellElement, index.__assign({ className: isFirstColInTranspose
+                                                        ? TABLE_CLASS.headerCell
+                                                        : TABLE_CLASS.cell, "data-feathery-field": cellFieldKey, css: cellCss, onClick: handleCellClick }, (isFirstColInTranspose ? { scope: 'row' } : {}), { children: isFirstColInTranspose && isSortable ? (index.jsxs("div", index.__assign({ css: index.__assign(index.__assign({}, sortHeaderContentStyle), { justifyContent: 'space-between' }) }, { children: [index.jsx("span", { children: (_b = index.stringifyWithNull(cellValue)) !== null && _b !== void 0 ? _b : '' }), index.jsx("span", index.__assign({ css: sortIconContainerStyle }, { children: index.jsx(SortIcon, { isSorted: isSorted, sortDirection: sortDirection }) }))] }))) : canEdit ? (index.jsx(EditableCell, { value: cellValue, fieldKey: column.field_key, rowIndex: rowIndex, onEdit: wrappedHandleCellEdit, onClear: handleCellClear })) : ((_c = index.stringifyWithNull(cellValue)) !== null && _c !== void 0 ? _c : '') }), colIndex));
                                             }), !isTransposed && actions.length > 0 && (index.jsxs("td", index.__assign({ ref: function (el) {
                                                     if (el)
                                                         actionCellRefs.current.set(rowIndex, el);
                                                     else
                                                         actionCellRefs.current.delete(rowIndex);
-                                                }, css: index.__assign(index.__assign(index.__assign({}, cellStyle), { paddingLeft: 0 }), styles.getTarget('td')) }, { children: [index.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: index.__assign(index.__assign(index.__assign({}, cellStyle), { paddingLeft: 0 }), styles.getTarget('td')) }, { children: [index.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 && (index.jsx(DeleteConfirm, { anchorEl: (_a = actionCellRefs.current.get(rowIndex)) !== null && _a !== void 0 ? _a : null, onConfirm: function () { return wrappedHandleDeleteRow(rowIndex); }, onCancel: handleCancelDelete }))] }))), showStandaloneDeleteColumn && (index.jsxs("td", index.__assign({ css: index.__assign(index.__assign({}, deleteColumnStyle), styles.getTarget('td')) }, { children: [index.jsx("button", index.__assign({ type: 'button', ref: function (el) {
+                                                        deleteRowIndex === rowIndex && (index.jsx(DeleteConfirm, { anchorEl: (_a = actionCellRefs.current.get(rowIndex)) !== null && _a !== void 0 ? _a : null, onConfirm: function () { return wrappedHandleDeleteRow(rowIndex); }, onCancel: handleCancelDelete }))] }))), showStandaloneDeleteColumn && (index.jsxs("td", index.__assign({ className: TABLE_CLASS.cell, css: index.__assign(index.__assign({}, deleteColumnStyle), styles.getTarget('td')) }, { children: [index.jsx("button", index.__assign({ type: 'button', ref: function (el) {
                                                             if (el)
                                                                 deleteIconRefs.current.set(rowIndex, el);
                                                             else
                                                                 deleteIconRefs.current.delete(rowIndex);
-                                                        }, css: index.__assign(index.__assign({}, deleteIconStyle), (deleteRowIndex === rowIndex && {
+                                                        }, className: TABLE_CLASS.deleteButton, css: index.__assign(index.__assign({}, deleteIconStyle), (deleteRowIndex === rowIndex && {
                                                             opacity: 1
                                                         })), onClick: function (e) {
                                                             e.stopPropagation();
                                                             setDeleteRowIndex(deleteRowIndex === rowIndex ? null : rowIndex);
                                                         } }, { children: index.jsx(TrashIcon, {}) })), deleteRowIndex === rowIndex && (index.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 && (index.jsxs("tr", index.__assign({ css: index.__assign(index.__assign({}, rowStyle), styles.getTarget('tr')) }, { children: [index.jsx("th", { scope: 'row', css: index.__assign(index.__assign(index.__assign({}, thStyle), { backgroundColor: '#f9fafb', borderRight: '1px solid #e5e7eb', width: '1px', whiteSpace: 'nowrap' }), styles.getTarget('th')) }), transposedRowIndices.map(function (originalRowIndex, idx) { return (index.jsx("td", index.__assign({ css: index.__assign(index.__assign(index.__assign({}, cellStyle), (idx === 0 ? {} : { paddingLeft: 0 })), styles.getTarget('td')) }, { children: index.jsx("div", index.__assign({ css: { display: 'flex', justifyContent: 'flex-start' } }, { children: index.jsx(ActionButtons, { actions: actions, rowIndex: originalRowIndex, columnData: baseColumns, fieldValues: baseFieldValues, onClick: onClick, forceInlineButtons: true, tableId: element.id, buttonLoaders: buttonLoaders }) })) }), originalRowIndex)); })] })))] }))] })) }))), !showEmptyState && enablePagination && (index.jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, totalItems: totalRows, rowsPerPage: rowsPerPage, onPageChange: setCurrentPage }))] })));
+                                }), isTransposed && actions.length > 0 && (index.jsxs("tr", index.__assign({ className: TABLE_CLASS.row, css: index.__assign(index.__assign({}, rowStyle), styles.getTarget('tr')) }, { children: [index.jsx("th", { scope: 'row', className: TABLE_CLASS.headerCell, css: index.__assign(index.__assign(index.__assign({}, thStyle), { backgroundColor: '#f9fafb', borderRight: '1px solid #e5e7eb', width: '1px', whiteSpace: 'nowrap' }), styles.getTarget('th')) }), transposedRowIndices.map(function (originalRowIndex, idx) { return (index.jsx("td", index.__assign({ className: TABLE_CLASS.cell, css: index.__assign(index.__assign(index.__assign({}, cellStyle), (idx === 0 ? {} : { paddingLeft: 0 })), styles.getTarget('td')) }, { children: index.jsx("div", index.__assign({ css: { display: 'flex', justifyContent: 'flex-start' } }, { children: index.jsx(ActionButtons, { actions: actions, rowIndex: originalRowIndex, columnData: baseColumns, fieldValues: baseFieldValues, onClick: onClick, forceInlineButtons: true, tableId: element.id, buttonLoaders: buttonLoaders }) })) }), originalRowIndex)); })] })))] }))] })) }))), !showEmptyState && enablePagination && (index.jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, totalItems: totalRows, rowsPerPage: rowsPerPage, onPageChange: setCurrentPage }))] })));
 }
 
 exports.default = TableElement;

package/cjs/{fthry_index.CZvkZw_L.js → fthry_index.Ch4eVK8q.js}

@@ -1,14 +1,14 @@
 'use strict';
 
-var index$1 = require('./fthry_index.Y5sdcMuJ.js');
+var index$1 = require('./fthry_index.CpnN7Soi.js');
 var React = require('react');
-var Placeholder = require('./fthry_Placeholder.B7ueqeue.js');
-var InlineTooltip = require('./fthry_InlineTooltip.HDk3cIr4.js');
+var Placeholder = require('./fthry_Placeholder.BSe-1mcC.js');
+var InlineTooltip = require('./fthry_InlineTooltip.CKULIOlC.js');
 require('react/jsx-runtime');
 require('react-dom/client');
 require('jszip');
 require('react-dom');
-require('./fthry_Overlay.AOeUL6CY.js');
+require('./fthry_Overlay.yDSHNtwz.js');
 
 function TextArea(_a) {
     var element = _a.element, responsiveStyles = _a.responsiveStyles, fieldLabel = _a.fieldLabel, _b = _a.elementProps, elementProps = _b === void 0 ? {} : _b, _c = _a.required, required = _c === void 0 ? false : _c, _d = _a.disabled, disabled = _d === void 0 ? false : _d, editMode = _a.editMode, _e = _a.onChange, onChange = _e === void 0 ? function () { } : _e, _f = _a.setRef, setRef = _f === void 0 ? function () { } : _f, _g = _a.rawValue, rawValue = _g === void 0 ? '' : _g, inlineError = _a.inlineError, _h = _a.repeatIndex, repeatIndex = _h === void 0 ? null : _h, children = _a.children;

package/cjs/{fthry_index.Cyo-XM28.js → fthry_index.Ck590gDe.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./fthry_index.Y5sdcMuJ.js');
+var index = require('./fthry_index.CpnN7Soi.js');
 var React = require('react');
 require('react/jsx-runtime');
 require('react-dom/client');

package/cjs/{fthry_index.DMtFsERM.js → fthry_index.CmtLVGae.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./fthry_index.Y5sdcMuJ.js');
+var index = require('./fthry_index.CpnN7Soi.js');
 var React = require('react');
 var ReactJSXRuntime = require('react/jsx-runtime');
 require('react-dom/client');