@adaptabletools/adaptable-cjs 20.1.2 → 20.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable-cjs",
-  "version": "20.1.2",
+  "version": "20.1.3",
   "description": "Powerful data-agnostic HTML5 AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements",
   "keywords": [
     "web-components",

package/src/Utilities/Services/DataService.js

@@ -39,6 +39,7 @@ class DataService {
         if (cellDataChangedInfo.newValue != cellDataChangedInfo.oldValue) {
             this.emitter.emitSync('CellDataChanged', cellDataChangedInfo);
             this.adaptable.api.eventApi.internalApi.fireCellChangedEvent(cellDataChangedInfo);
+            console.log('cell changed called');
             const dataChangeLogEntry = this.extractDataChangeLogEntry(cellDataChangedInfo);
             this.cellDataChangeLogSubject$.next(dataChangeLogEntry);
         }

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/ColumnsList.js

@@ -334,7 +334,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
     };
     return (React.createElement(rebass_1.Box, { p: 2, style: { height: '100%' }, className: theme },
         React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "colId" },
-            React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: {
+            React.createElement(InfiniteTable_1.InfiniteTableGrid, { columnTypes: {
                     default: {
                         defaultFlex: 1,
                         align: 'center',

package/src/View/AdaptableWizardView/AdaptableConfigurationDialog/EntitlementsForm.js

@@ -109,7 +109,7 @@ const EntitlementsListForm = (props) => {
     }
     return (React.createElement(rebass_1.Box, { flex: 1, height: "100%", className: theme },
         React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "name" },
-            React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }))));
+            React.createElement(InfiniteTable_1.InfiniteTableGrid, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }))));
 };
 const DefaultEntitlementForm = (props) => {
     const abOptions = props.adaptableOptions;

package/src/View/CellSummary/CellSummaryDetails.js

@@ -29,7 +29,7 @@ class CellSummaryDetails extends React.Component {
             });
         }
         return (React.createElement(React.Fragment, null, this.props.CellSummary != null ? (React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "Operation" },
-            React.createElement(InfiniteTable_1.InfiniteTable, { domProps: tableDOMProps, columns: columnsMap }))) : (React.createElement(EmptyContent_1.default, null,
+            React.createElement(InfiniteTable_1.InfiniteTableGrid, { domProps: tableDOMProps, columns: columnsMap }))) : (React.createElement(EmptyContent_1.default, null,
             React.createElement("p", null, "No cells are selected - please select some cells.")))));
     }
 }

package/src/View/CellSummary/CellSummaryViewPanel.js

@@ -60,10 +60,10 @@ class CellSummaryViewPanelComponent extends React.Component {
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: shouldDisable ? GeneralConstants.READ_ONLY_STYLE : `ab-${elementType}__CellSummary__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             React.createElement(rebass_1.Flex, { flex: 1 },
-                React.createElement(Select_1.Select, { style: { width: '100%' }, className: `ab-${elementType}__CellSummary__select`, disabled: shouldDisable, options: [...operationMenuItems, ...operationDefinitions], onChange: (x) => this.props.onCellSummaryOperationChange(x), value: this.props.CellSummaryOperation })),
+                React.createElement(Select_1.Select, { "aria-label": "Cell Summary Operation Selector", style: { width: '100%' }, className: `ab-${elementType}__CellSummary__select`, disabled: shouldDisable, options: [...operationMenuItems, ...operationDefinitions], onChange: (x) => this.props.onCellSummaryOperationChange(x), value: this.props.CellSummaryOperation })),
             React.createElement(rebass_1.Flex, { alignItems: "center", ml: 2 }, React.createElement(React.Fragment, null,
                 renderOperationValue(),
-                this.props.CellSummary != null && this.props.CellSummary.Count > 0 && (React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMaxWidth: 360, className: "ab-ToolPanel__CellSummary__info", bodyText: [cellSummaryPopover], useButton: true, showEvent: 'focus', hideEvent: "blur" }))))));
+                this.props.CellSummary != null && this.props.CellSummary.Count > 0 && (React.createElement(AdaptablePopover_1.AdaptablePopover, { popoverMaxWidth: 360, className: "ab-ToolPanel__CellSummary__info", bodyText: [cellSummaryPopover], useButton: true, showEvent: 'focus', hideEvent: "blur", tooltipText: 'Show Cell Summaries' }))))));
     }
     checkSelectedCells() {
         this.props.onCreateCellSummary();

package/src/View/ColumnInfo/ColumnInfo.js

@@ -160,7 +160,7 @@ const ColumnDefPreview = (props) => {
             Value: { field: 'Value', header: 'Value', defaultFlex: 3 },
         };
         return (React.createElement(InfiniteTable_1.DataSource, { data: keyValuePairs, primaryKey: "Key" },
-            React.createElement(InfiniteTable_1.InfiniteTable, { domProps: domProps, columns: columnsMap })));
+            React.createElement(InfiniteTable_1.InfiniteTableGrid, { domProps: domProps, columns: columnsMap })));
     }
 };
 const ModuleView = (props) => {

package/src/View/Comments/CommentsPopup.js

@@ -87,7 +87,7 @@ const CellComments = (props) => {
                     adaptable.api.commentApi.deleteCommentThread(props.commentThread);
                 } })) },
         React.createElement(InfiniteTable_1.DataSource, { data: props.commentThread.Comments, primaryKey: "Uuid" },
-            React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }))));
+            React.createElement(InfiniteTable_1.InfiniteTableGrid, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }))));
 };
 const CommentsPopup = (props) => {
     const commentThreads = (0, react_redux_1.useSelector)((state) => {

package/src/View/Components/ColumnFilter/components/FloatingFilterValues.js

@@ -12,7 +12,13 @@ const renderSingleValue = (option) => {
 const renderMultipleValues = (values, options) => {
     const { focused, placeholder } = options;
     const text = values.map(renderSingleValue).join(', ');
-    return values.length ? `(${values.length}) ${text}` : focused ? null : placeholder ?? 'Select...';
+    return values.length ? (React.createElement(React.Fragment, null,
+        React.createElement("span", { "data-name": "multiple-values-count" },
+            "(",
+            values.length,
+            ")"),
+        " ",
+        text)) : focused ? null : (placeholder ?? 'Select...');
 };
 function useDistinctFilterColumnValues(options) {
     const { columnId, searchValueRef } = options;

package/src/View/Components/Forms/AdaptableFormControlTextClear.js

@@ -17,7 +17,7 @@ exports.AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
             width: '100%',
             ...props.style,
         } },
-        React.createElement(Input_1.default, { autoFocus: props.autoFocus, style: props.inputStyle, ref: (r) => {
+        React.createElement(Input_1.default, { "aria-label": props['aria-label'], autoFocus: props.autoFocus, style: props.inputStyle, ref: (r) => {
                 inputRef.current = r;
                 if (!ref) {
                     return;

package/src/View/Components/PreviewResultsPanel.js

@@ -62,7 +62,7 @@ class PreviewResultsPanel extends React.Component {
                 },
             } },
             React.createElement(InfiniteTable_1.DataSource, { data: dataSource, primaryKey: "Id" },
-                React.createElement(InfiniteTable_1.InfiniteTable, { sortable: false, domProps: tableDOMProps, columns: columnsMap })))) : null;
+                React.createElement(InfiniteTable_1.InfiniteTableGrid, { sortable: false, domProps: tableDOMProps, columns: columnsMap })))) : null;
     }
     getValidationErrorMessage(alertDefinitions) {
         let validationService = this.props.api.internalApi.getValidationService();

package/src/View/Components/Selectors/BulkUpdateValueSelector.js

@@ -37,7 +37,7 @@ const BulkUpdateValueSelector = (props) => {
             ]), onChange: (value) => {
                 props.onColumnValueChange(value || null);
             } })));
-    const input = (React.createElement(AdaptableInput_1.default, { "data-name": "bulkupdate-value-input", type: props.selectedColumn
+    const input = (React.createElement(AdaptableInput_1.default, { "data-name": "bulkupdate-value-input", "aria-label": "Bulk Update Value Input", type: props.selectedColumn
             ? UIHelper_1.default.getDescriptionForDataType(props.selectedColumn.dataType)
             : 'text', placeholder: props.selectedColumn
             ? UIHelper_1.default.getPlaceholderForDataType(props.selectedColumn.dataType)
@@ -46,7 +46,7 @@ const BulkUpdateValueSelector = (props) => {
         } }));
     let valueTypeSelector = null;
     if (isDateType) {
-        valueTypeSelector = (React.createElement(Select_1.Select, { options: [
+        valueTypeSelector = (React.createElement(Select_1.Select, { "aria-label": "Bulk Update Value Selector", options: [
                 { label: 'New', value: 'new' },
                 { label: 'Existing', value: 'existing' },
             ], value: valueType, onChange: (value) => {

package/src/View/Components/Selectors/PermittedValuesSelector.js

@@ -101,6 +101,6 @@ const PermittedValuesSelector = function (props) {
             reload();
         }
     };
-    return (React.createElement(Select_1.Select, { menuPortalTarget: props.menuPortalTarget, size: props.size, isMulti: props.isMulti, className: props.className, disabled: props.disabled, closeMenuOnSelect: !props.isMulti, "data-name": "permitted-values-selector", placeholder: props.placeholder || (props.allowNewValues ? 'Select or type new value' : 'Select value'), isCreatable: isCreatable, isClearable: true, onMenuOpen: reload, options: options, isLoading: isLoading, onInputChange: onInputChange, onChange: handleOnChange, onFocus: props.onFocus, onBlur: props.onBlur, value: props.value }));
+    return (React.createElement(Select_1.Select, { "aria-label": "Permitted Values Selector", menuPortalTarget: props.menuPortalTarget, size: props.size, isMulti: props.isMulti, className: props.className, disabled: props.disabled, closeMenuOnSelect: !props.isMulti, "data-name": "permitted-values-selector", placeholder: props.placeholder || (props.allowNewValues ? 'Select or type new value' : 'Select value'), isCreatable: isCreatable, isClearable: true, onMenuOpen: reload, options: options, isLoading: isLoading, onInputChange: onInputChange, onChange: handleOnChange, onFocus: props.onFocus, onBlur: props.onBlur, value: props.value }));
 };
 exports.PermittedValuesSelector = PermittedValuesSelector;

package/src/View/Components/WizardSummaryPage.js

@@ -19,6 +19,6 @@ const tableDOMProps = {
 const WizardSummaryPage = (props) => {
     return (React.createElement(WizardPanel_1.default, { bodyProps: { padding: 0 }, className: "ab-WizardSummary", "data-name": 'wizard-summary' },
         React.createElement(InfiniteTable_1.DataSource, { data: props.KeyValuePairs, primaryKey: "Key" },
-            React.createElement(InfiniteTable_1.InfiniteTable, { showZebraRows: true, domProps: tableDOMProps, columns: columnsMap }))));
+            React.createElement(InfiniteTable_1.InfiniteTableGrid, { showZebraRows: true, domProps: tableDOMProps, columns: columnsMap }))));
 };
 exports.WizardSummaryPage = WizardSummaryPage;

package/src/View/Dashboard/CustomDashboardButton.js

@@ -23,7 +23,7 @@ const CustomDashboardButton = (props) => {
         return null;
     }
     const disabled = button.disabled && button.disabled(button, dashboardContext);
-    return (React.createElement(SimpleButton_1.default, { key: buttonLabel, variant: buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text', tone: buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none', className: `ab-DashboardToolbar__Home__${(0, kebabCase_1.default)(buttonLabel)} ${buttonStyle?.className || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled || props.accessLevel == 'ReadOnly', onClick: () => {
+    return (React.createElement(SimpleButton_1.default, { key: buttonLabel, "aria-label": buttonLabel, variant: buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text', tone: buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none', className: `ab-DashboardToolbar__Home__${(0, kebabCase_1.default)(buttonLabel)} ${buttonStyle?.className || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled || props.accessLevel == 'ReadOnly', onClick: () => {
             button.onClick?.(button, dashboardContext);
             setTimeout(() => {
                 // mutate state to force a re-rendering

package/src/View/Dashboard/Dashboard.js

@@ -69,7 +69,7 @@ const DashboardComponent = (props) => {
             shortcuts = shortcutsArray.map((x, index) => {
                 let menuItem = props.InternalState.Dashboard.DashboardModuleButtons.find((y) => y.isVisible && y.category == x);
                 if (menuItem) {
-                    return (React.createElement(AdaptableButton_1.AdaptableButtonComponent, { "data-name": `dashboard-module-button-${menuItem.category ?? 'custom-' + index}`, key: menuItem.label, variant: menuItem.category === 'SystemStatus' ? 'outlined' : 'text', tone: menuItem.category === 'SystemStatus' ? 'neutral' : 'none', className: `ab-DashboardToolbar__Home__${(0, kebabCase_1.default)(menuItem.label)}`, icon: menuItem.icon, tooltip: menuItem.label, disabled: props.accessLevel == 'ReadOnly', onClick: () => props.dispatch(menuItem.reduxAction), accessLevel: 'Full', style: menuItem.category === 'SystemStatus'
+                    return (React.createElement(AdaptableButton_1.AdaptableButtonComponent, { "data-name": `dashboard-module-button-${menuItem.category ?? 'custom-' + index}`, "aria-label": menuItem.label, key: menuItem.label, variant: menuItem.category === 'SystemStatus' ? 'outlined' : 'text', tone: menuItem.category === 'SystemStatus' ? 'neutral' : 'none', className: `ab-DashboardToolbar__Home__${(0, kebabCase_1.default)(menuItem.label)}`, icon: menuItem.icon, tooltip: menuItem.label, disabled: props.accessLevel == 'ReadOnly', onClick: () => props.dispatch(menuItem.reduxAction), accessLevel: 'Full', style: menuItem.category === 'SystemStatus'
                             ? {
                                 ...UIHelper_1.default.getStyleForMessageType(props.api.systemStatusApi.getCurrentSystemStatusMessageInfo()?.statusType ??
                                     'Success'),
@@ -93,7 +93,7 @@ const DashboardComponent = (props) => {
     };
     const renderQuickSearch = () => {
         return (React.createElement(rebass_1.Box, { ml: 2 },
-            React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { type: "text", placeholder: props.api.optionsApi.getQuickSearchOptions().quickSearchPlaceholder, className: "ab-DashboardToolbar__QuickSearch__text", value: searchText, OnTextChange: search, style: { width: 'auto' }, inputStyle: { width: '7rem' } })));
+            React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { type: "text", "aria-label": 'Quick Search', placeholder: props.api.optionsApi.getQuickSearchOptions().quickSearchPlaceholder, className: "ab-DashboardToolbar__QuickSearch__text", value: searchText, OnTextChange: search, style: { width: 'auto' }, inputStyle: { width: '7rem' } })));
     };
     let instanceName = props.api.internalApi.getToolbarTitle();
     let dashboardOptions = props.api.optionsApi.getDashboardOptions();

package/src/View/Dashboard/DashboardToolbarFactory.js

@@ -16,7 +16,7 @@ const SystemDashboardToolbarFactory = (props) => {
     const accessLevel = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(props.toolbarName);
     const moduleToolbarView = AdaptableViewFactory_1.AdaptableViewPanelFactory.get(props.toolbarName);
     if (!moduleToolbarView) {
-        return React.createElement(React.Fragment, null, "adasdasdas");
+        return React.createElement(React.Fragment, null);
     }
     const moduleToolbarElement = React.createElement(moduleToolbarView, {
         viewType: 'Toolbar',

package/src/View/DataChangeHistory/DataChangeHistoryViewPanel.js

@@ -24,21 +24,20 @@ const DataChangeHistoryViewPanelControl = (props) => {
     const handleOpenPopup = React.useCallback(() => {
         adaptable.api.settingsPanelApi.openSettingsPanel('DataChangeHistory');
     }, []);
-    const { changeHistoryMode, activationTime, suspensionTime } = (0, react_redux_1.useSelector)((state) => ({
-        changeHistoryMode: state.Internal.DataChangeHistory.currentMode,
-        activationTime: state.Internal.DataChangeHistory.enableTime,
-        suspensionTime: state.Internal.DataChangeHistory.suspendTime,
-    }));
+    const dataChangeHistoryState = (0, react_redux_1.useSelector)((state) => state.Internal.DataChangeHistory);
+    const changeHistoryMode = dataChangeHistoryState.currentMode;
+    const activationTime = dataChangeHistoryState.enableTime;
+    const suspensionTime = dataChangeHistoryState.suspendTime;
     const enabled = changeHistoryMode === 'ACTIVE';
     const disabled = changeHistoryMode === 'INACTIVE';
     const suspended = changeHistoryMode === 'SUSPENDED';
     const gap = props.gap ?? 'var(--ab-space-1)';
     const buttonsPaddingY = props.buttonsPaddingY ?? 2;
     const buttonPanel = (React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPanel--button-panel", paddingY: buttonsPaddingY, style: { gap: gap } },
-        disabled && (React.createElement(ButtonPlay_1.ButtonPlay, { className: "ab-DataChangeHistoryPanel--button-activate", "data-name": 'data-change-history--button-activate', tooltip: '', onClick: () => onChangeHistoryEnable() })),
-        suspended && (React.createElement(ButtonPlay_1.ButtonPlay, { className: "ab-DataChangeHistoryPanel--button-resume", "data-name": 'data-change-history--button-resume', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() })),
-        enabled && (React.createElement(ButtonPause_1.ButtonPause, { className: "ab-DataChangeHistoryPanel--button-suspend", "data-name": 'data-change-history--button-suspend', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend() })),
-        (enabled || suspended) && (React.createElement(ButtonStop_1.ButtonStop, { className: "ab-DataChangeHistoryPanel--button-deactivate", "data-name": 'data-change-history--button-deactivate', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable() }))));
+        disabled && (React.createElement(ButtonPlay_1.ButtonPlay, { "aria-label": "Enable Data Change History", className: "ab-DataChangeHistoryPanel--button-activate", "data-name": 'data-change-history--button-activate', tooltip: '', onClick: () => onChangeHistoryEnable() })),
+        suspended && (React.createElement(ButtonPlay_1.ButtonPlay, { "aria-label": "Resume Data Change History", className: "ab-DataChangeHistoryPanel--button-resume", "data-name": 'data-change-history--button-resume', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() })),
+        enabled && (React.createElement(ButtonPause_1.ButtonPause, { "aria-label": "Suspend Data Change History", className: "ab-DataChangeHistoryPanel--button-suspend", "data-name": 'data-change-history--button-suspend', tooltip: 'Suspend tracking data changes', onClick: () => onChangeHistorySuspend() })),
+        (enabled || suspended) && (React.createElement(ButtonStop_1.ButtonStop, { "aria-label": "Deactivate Data Change History", className: "ab-DataChangeHistoryPanel--button-deactivate", "data-name": 'data-change-history--button-deactivate', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable() }))));
     const dateFormat = `${adaptable.api.optionsApi.getUserInterfaceOptions().dateInputOptions.dateFormat} HH:mm:ss`;
     const statusPanel = (React.createElement(rebass_1.Flex, { className: "ab-DataChangeHistoryPanel--status-panel", alignItems: 'center', style: { gap: gap } },
         enabled && (React.createElement(Tooltip_1.default, { label: !!activationTime && `since ${(0, FormatHelper_1.DateFormatter)(activationTime, { Pattern: dateFormat })}` },

package/src/View/DataImport/DataImportWizard/sections/ColumnsSection.js

@@ -118,7 +118,7 @@ const ColumnsSection = (props) => {
             React.createElement(Tabs_1.Tabs.Tab, null, "Columns"),
             React.createElement(Tabs_1.Tabs.Content, null,
                 React.createElement(InfiniteTable_1.DataSource, { data: props.columnsMap, primaryKey: 'field' },
-                    React.createElement(InfiniteTable_1.InfiniteTable, { columnPinning: {
+                    React.createElement(InfiniteTable_1.InfiniteTableGrid, { columnPinning: {
                             valid: 'end',
                             type: 'end',
                         }, columnTypes: {

package/src/View/DataImport/DataImportWizard/sections/DataPreview.js

@@ -143,7 +143,7 @@ const DataPreview = (props) => {
             });
             props.onDataChange(newRowData);
         } },
-        React.createElement(InfiniteTable_1.InfiniteTable, { columnPinning: {
+        React.createElement(InfiniteTable_1.InfiniteTableGrid, { columnPinning: {
                 valid: 'end',
                 type: 'end',
             }, columnTypes: {

package/src/View/DataSet/DataSetViewPanel.js

@@ -30,7 +30,7 @@ class DataSetViewPanelComponent extends React.Component {
         });
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__DataSet__wrap` },
-            React.createElement(Select_1.Select, { style: { width: '100%' }, placeholder: 'Select Data Set', disabled: ArrayExtensions_1.default.IsNullOrEmpty(availableDataSets), options: availableDataSets, value: currentDataSetName, className: `ab-${elementType}__DataSet__select`, onChange: (destination) => this.onSelectedDataSetChanged(destination) })));
+            React.createElement(Select_1.Select, { "aria-label": 'Select Data Set', style: { width: '100%' }, placeholder: 'Select Data Set', disabled: ArrayExtensions_1.default.IsNullOrEmpty(availableDataSets), options: availableDataSets, value: currentDataSetName, className: `ab-${elementType}__DataSet__select`, onChange: (destination) => this.onSelectedDataSetChanged(destination) })));
     }
     onSelectedDataSetChanged(dataSetName) {
         if (StringExtensions_1.StringExtensions.IsNullOrEmpty(dataSetName)) {

package/src/View/Export/ReportFormatSelector.js

@@ -20,6 +20,6 @@ const ReportFormatSelector = (props) => {
     });
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
     return (react_1.default.createElement(rebass_1.Flex, { "data-name": "report-format-selector", flex: 1, minWidth: 140 },
-        react_1.default.createElement(Select_1.Select, { style: { width: '100%' }, size: size, placeholder: GeneralConstants_1.SELECT_REPORT_FORMAT_STRING, disabled: !allFormats.length || reportName == undefined, className: `ab-${elementType}__Export__format-select`, options: formatItems, onChange: (format) => onReportFormatSelected(format), value: reportFormat, isClearable: true })));
+        react_1.default.createElement(Select_1.Select, { "aria-label": GeneralConstants_1.SELECT_REPORT_FORMAT_STRING, style: { width: '100%' }, size: size, placeholder: GeneralConstants_1.SELECT_REPORT_FORMAT_STRING, disabled: !allFormats.length || reportName == undefined, className: `ab-${elementType}__Export__format-select`, options: formatItems, onChange: (format) => onReportFormatSelected(format), value: reportFormat, isClearable: true })));
 };
 exports.ReportFormatSelector = ReportFormatSelector;

package/src/View/Export/ReportNameSelector.js

@@ -20,6 +20,6 @@ const ReportNameSelector = (props) => {
     });
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
     return (react_1.default.createElement(rebass_1.Flex, { "data-name": "report-name-selector", flex: 1, minWidth: 160 },
-        react_1.default.createElement(Select_1.Select, { style: { width: '100%' }, size: size, "data-name": "report-name-selector", placeholder: GeneralConstants_1.SELECT_REPORT_STRING, disabled: !allReportNames.length, className: `ab-${elementType}__Export__report-select`, options: reportItems, onChange: (report) => onReportNameSelected(report), value: reportName, isClearable: true })));
+        react_1.default.createElement(Select_1.Select, { "aria-label": GeneralConstants_1.SELECT_REPORT_STRING, style: { width: '100%' }, size: size, "data-name": "report-name-selector", placeholder: GeneralConstants_1.SELECT_REPORT_STRING, disabled: !allReportNames.length, className: `ab-${elementType}__Export__report-select`, options: reportItems, onChange: (report) => onReportNameSelected(report), value: reportName, isClearable: true })));
 };
 exports.ReportNameSelector = ReportNameSelector;

package/src/View/Filter/FilterViewPanel.js

@@ -33,8 +33,8 @@ class FilterViewPanelComponent extends React.Component {
         return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             React.createElement(rebass_1.Flex, null,
                 ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && (React.createElement(AdaptablePopover_1.AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [React.createElement(ActiveFiltersPanel_1.ActiveFiltersPanel, null)], useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })),
-                React.createElement(ButtonClear_1.ButtonClear, { className: `ab-${elementType}__Filter__clear`, marginLeft: 1, marginBottom: 0, marginRight: 1, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel' }, this.props.viewType === 'ToolPanel' && 'Clear'),
-                React.createElement(SimpleButton_1.default, { className: (0, join_1.default)(`ab-${elementType}__Filter__suspend-button`, isAtLeastOneFilterActive && `ab-${elementType}__Filter__suspend-all`, !isAtLeastOneFilterActive && `ab-${elementType}__Filter__un-suspend-all`), disabled: !isAtLeastOneFilter, onClick: handleSuspendUnsuspendAll, tone: isAtLeastOneFilterActive ? 'neutral' : 'success', variant: "text", icon: isAtLeastOneFilterActive ? 'pause' : 'play', accessLevel: this.props.accessLevel })),
+                React.createElement(ButtonClear_1.ButtonClear, { "aria-label": 'Clear Filters', className: `ab-${elementType}__Filter__clear`, marginLeft: 1, marginBottom: 0, marginRight: 1, onClick: () => this.onClearFilters(), tooltip: "Clear Filters", disabled: this.props.ColumnFilters.length == 0, showText: this.props.viewType === 'ToolPanel' }, this.props.viewType === 'ToolPanel' && 'Clear'),
+                React.createElement(SimpleButton_1.default, { "aria-label": isAtLeastOneFilterActive ? 'Suspend All Filters' : 'Resume All Filters', className: (0, join_1.default)(`ab-${elementType}__Filter__suspend-button`, isAtLeastOneFilterActive && `ab-${elementType}__Filter__suspend-all`, !isAtLeastOneFilterActive && `ab-${elementType}__Filter__un-suspend-all`), disabled: !isAtLeastOneFilter, onClick: handleSuspendUnsuspendAll, tone: isAtLeastOneFilterActive ? 'neutral' : 'success', variant: "text", icon: isAtLeastOneFilterActive ? 'pause' : 'play', accessLevel: this.props.accessLevel })),
             React.createElement(rebass_1.Flex, { alignItems: "center" }, this.props.api.filterApi.columnFilterApi.isQuickFilterAvailable() && (React.createElement(CheckBox_1.CheckBox, { className: `ab-${elementType}__Filter__active-check`, disabled: this.props.accessLevel === 'ReadOnly' ||
                     this.props.api.layoutApi.isCurrentLayoutPivot(), marginTop: 0, marginBottom: 0, fontSize: 2, padding: 1, checked: this.props.IsQuickFilterVisible, onChange: (checked) => {
                     checked ? this.props.onShowQuickFilterBar() : this.props.onHideQuickFilterBar();

package/src/View/GridFilter/GridFilterViewPanel.js

@@ -94,7 +94,7 @@ const QueryViewPanelComponent = (props) => {
             columnsDropdown,
             namedQuerySelector,
             ' ')) : (React.createElement(React.Fragment, null,
-            React.createElement(ButtonPlay_1.ButtonPlay, { onClick: () => runQuery(), tooltip: "Run Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || !isExpressionValid || expression == '' || expression == gridFilter, marginRight: 1 }),
+            React.createElement(ButtonPlay_1.ButtonPlay, { "aria-label": 'Run Grid Filter', onClick: () => runQuery(), tooltip: "Run Grid Filter", accessLevel: gridFilterAccessLevel, variant: "text", tone: "neutral", disabled: disabled || !isExpressionValid || expression == '' || expression == gridFilter, marginRight: 1 }),
             ' ',
             React.createElement(ButtonClear_1.ButtonClear, { onClick: () => clearQuery(), tooltip: "Clear Grid Filter", accessLevel: gridFilterAccessLevel, disabled: expression == '' }),
             ' ',

package/src/View/Layout/LayoutViewPanel.js

@@ -44,7 +44,7 @@ const LayoutViewPanelComponent = (props) => {
     const layoutSelectStyle = elementType === 'ToolPanel' ? { minWidth: '100%' } : {};
     return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
         React.createElement(rebass_1.Flex, { style: layoutSelectStyle, flex: 1 },
-            React.createElement(Select_1.Select, { disabled: isErrorLayout, style: { width: '100%' }, options: availableLayoutOptions, className: `ab-${elementType}__Layout__select`, value: layoutEntity ? layoutEntity.Name : null, onChange: (layout) => onSelectLayout(layout) })),
+            React.createElement(Select_1.Select, { "aria-label": 'Select Layout', disabled: isErrorLayout, style: { width: '100%' }, options: availableLayoutOptions, className: `ab-${elementType}__Layout__select`, value: layoutEntity ? layoutEntity.Name : null, onChange: (layout) => onSelectLayout(layout) })),
         React.createElement(rebass_1.Flex, { flexDirection: "row", className: (0, join_1.default)(accessLevel === 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Layout__wrap`) },
             React.createElement(ButtonEdit_1.ButtonEdit, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: GeneralConstants_1.LAYOUT_EDIT_TOOLTIP, className: `ab-${elementType}__Layout__edit`, accessLevel: entityAccessLevel }),
             React.createElement(ButtonClone_1.ButtonClone, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name, (0, isPivotLayout_1.isPivotLayout)(layoutEntity) ? 'pivot' : 'table', 'Clone'), tooltip: GeneralConstants_1.LAYOUT_CLONE_TOOLTIP, className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }),

package/src/View/Layout/PivotDetailsPopoup.js

@@ -73,6 +73,6 @@ const PivotDetailsPopoup = (props) => {
         };
     }, [props.popupProps]);
     return (React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: columnId },
-        React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: columnTypes, domProps: tableDOMProps, columns: columns })));
+        React.createElement(InfiniteTable_1.InfiniteTableGrid, { columnTypes: columnTypes, domProps: tableDOMProps, columns: columns })));
 };
 exports.PivotDetailsPopoup = PivotDetailsPopoup;

package/src/View/Layout/Wizard/sections/ColumnsSection.js

@@ -133,7 +133,7 @@ const ColumnsSectionSummary = () => {
         },
     };
     return (React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "columnId" },
-        React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: columnTypes, rowHeight: rowHeight, columnHeaderHeight: headerHeight, domProps: tableDOMProps, columns: columns })));
+        React.createElement(InfiniteTable_1.InfiniteTableGrid, { columnTypes: columnTypes, rowHeight: rowHeight, columnHeaderHeight: headerHeight, domProps: tableDOMProps, columns: columns })));
 };
 exports.ColumnsSectionSummary = ColumnsSectionSummary;
 const ColumnRow = (props) => {

package/src/View/Note/NotePopup.js

@@ -91,6 +91,6 @@ const NotePopup = (props) => {
                     }
                 }
             } },
-            React.createElement(InfiniteTable_1.InfiniteTable, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }))));
+            React.createElement(InfiniteTable_1.InfiniteTableGrid, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }))));
 };
 exports.NotePopup = NotePopup;

package/src/View/SmartEdit/SmartEditViewPanel.js

@@ -70,7 +70,7 @@ class SmartEditViewPanelComponent extends React.Component {
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(rebass_1.Flex, { flexDirection: "row", className: `ab-${elementType}__SmartEdit__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             React.createElement(rebass_1.Flex, null,
-                React.createElement(Select_1.Select, { value: typeof this.props.SmartEditOperation === 'object'
+                React.createElement(Select_1.Select, { "aria-label": 'Select Smart Edit Operation', value: typeof this.props.SmartEditOperation === 'object'
                         ? this.props.SmartEditOperation.name
                         : this.props.SmartEditOperation, options: operationMenuItems, onChange: (operation) => this.props.onSmartEditOperationChange(operation), style: { marginRight: 1 } }),
                 React.createElement(Input_1.default, { style: {

package/src/View/StateManagement/components/LoadButton.js

@@ -21,7 +21,7 @@ const LoadButton = (props) => {
         });
     };
     return (React.createElement(SimpleButton_1.default, { ...props, className: "ab-StateManagement__Load-Button" },
-        React.createElement("input", { type: "file", onChange: (json) => onLoadInitialState(json), accept: '.json', style: {
+        React.createElement("input", { "aria-label": "Load Adaptable State", type: "file", onChange: (json) => onLoadInitialState(json), accept: '.json', style: {
                 opacity: 0,
                 position: 'absolute',
                 cursor: 'pointer',

package/src/View/Theme/ThemeSelector.js

@@ -27,7 +27,7 @@ const ThemeSelector = (props) => {
             label: theme.Description,
         };
     });
-    return (React.createElement(Select_1.Select, { "data-name": "select-theme-dropdown", searchable: false, options: optionThemes, value: currentTheme, disabled: disabled, size: props.size, onChange: (themeName) => {
+    return (React.createElement(Select_1.Select, { "aria-label": "Select Theme", "data-name": "select-theme-dropdown", searchable: false, options: optionThemes, value: currentTheme, disabled: disabled, size: props.size, onChange: (themeName) => {
             dispatch(ThemeRedux.ThemeSelect(themeName));
         } }));
 };

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -225,6 +225,16 @@ export declare class AdaptableAgGrid implements IAdaptable {
     updateRowGroupsExpandedState(layout?: Layout): void;
     isGroupRowNode(rowNode: IRowNode): boolean;
     getFilteredData(): any[];
+    /**
+     * This method internally differentiates between server-side and client-side row model
+     * and correctly calls the appropriate method as per the current row model type
+     */
+    private applyAgGridTransaction;
+    /**
+     * This method internally differentiates between server-side and client-side row model
+     * and correctly calls the appropriate method as per the current row model type
+     */
+    private applyAgGridTransactionAsync;
     updateRows(dataRows: any[], dataUpdateConfig?: DataUpdateConfig): Promise<IRowNode[]>;
     addRows(dataRows: any[], dataUpdateConfig?: DataUpdateConfig): Promise<IRowNode[]>;
     addOrUpdateRows(dataRows: any[], dataUpdateConfig?: DataUpdateConfig): Promise<{

package/src/agGrid/AdaptableAgGrid.js

@@ -1958,6 +1958,28 @@ You need to define at least one Layout!`);
         });
         return data;
     }
+    /**
+     * This method internally differentiates between server-side and client-side row model
+     * and correctly calls the appropriate method as per the current row model type
+     */
+    applyAgGridTransaction(transaction) {
+        const isServerSideRowModel = this.getAgGridRowModelType() === 'serverSide';
+        const agGridApi = this.agGridAdapter.getAgGridApi();
+        return isServerSideRowModel
+            ? agGridApi.applyServerSideTransaction(transaction)
+            : agGridApi.applyTransaction(transaction);
+    }
+    /**
+     * This method internally differentiates between server-side and client-side row model
+     * and correctly calls the appropriate method as per the current row model type
+     */
+    applyAgGridTransactionAsync(transaction, callback) {
+        const isServerSideRowModel = this.getAgGridRowModelType() === 'serverSide';
+        const agGridApi = this.agGridAdapter.getAgGridApi();
+        return isServerSideRowModel
+            ? agGridApi.applyServerSideTransactionAsync(transaction, callback)
+            : agGridApi.applyTransactionAsync(transaction, callback);
+    }
     updateRows(dataRows, dataUpdateConfig) {
         if (this.hasAutogeneratedPrimaryKey) {
             this.addSyntheticPrimaryKeyIfMissing(dataRows);
@@ -1965,9 +1987,7 @@ You need to define at least one Layout!`);
         dataUpdateConfig = dataUpdateConfig || {};
         if (dataUpdateConfig.runAsync) {
             return new Promise((resolve) => {
-                this.agGridAdapter
-                    .getAgGridApi()
-                    .applyTransactionAsync({ update: dataRows }, (transaction) => {
+                this.applyAgGridTransactionAsync({ update: dataRows }, (transaction) => {
                     if (typeof dataUpdateConfig.callback === 'function') {
                         dataUpdateConfig.callback(transaction);
                     }
@@ -1979,7 +1999,7 @@ You need to define at least one Layout!`);
             });
         }
         else {
-            const transaction = this.agGridAdapter.getAgGridApi().applyTransaction({
+            const transaction = this.applyAgGridTransaction({
                 update: dataRows,
             });
             if (dataUpdateConfig.flushAsync) {
@@ -1999,7 +2019,7 @@ You need to define at least one Layout!`);
         }
         if (dataUpdateConfig.runAsync) {
             return new Promise((resolve) => {
-                this.agGridAdapter.getAgGridApi().applyTransactionAsync(newData, (transaction) => {
+                this.applyAgGridTransactionAsync(newData, (transaction) => {
                     if (typeof dataUpdateConfig.callback === 'function') {
                         dataUpdateConfig.callback(transaction);
                     }
@@ -2012,7 +2032,7 @@ You need to define at least one Layout!`);
             });
         }
         else {
-            const transaction = this.agGridAdapter.getAgGridApi().applyTransaction(newData);
+            const transaction = this.applyAgGridTransaction(newData);
             if (dataUpdateConfig.flushAsync) {
                 this.agGridAdapter.getAgGridApi().flushAsyncTransactions();
             }
@@ -2039,9 +2059,7 @@ You need to define at least one Layout!`);
         dataUpdateConfig = dataUpdateConfig || {};
         if (dataUpdateConfig.runAsync) {
             return new Promise((resolve) => {
-                this.agGridAdapter
-                    .getAgGridApi()
-                    .applyTransactionAsync({ update: updateDataRows, add: addDataRows, addIndex: dataUpdateConfig.addIndex }, (transaction) => {
+                this.applyAgGridTransactionAsync({ update: updateDataRows, add: addDataRows, addIndex: dataUpdateConfig.addIndex }, (transaction) => {
                     if (typeof dataUpdateConfig.callback === 'function') {
                         dataUpdateConfig.callback(transaction);
                     }
@@ -2059,7 +2077,7 @@ You need to define at least one Layout!`);
             });
         }
         else {
-            const transaction = this.agGridAdapter.getAgGridApi().applyTransaction({
+            const transaction = this.applyAgGridTransaction({
                 update: updateDataRows,
                 add: addDataRows,
                 addIndex: dataUpdateConfig.addIndex,
@@ -2080,9 +2098,7 @@ You need to define at least one Layout!`);
         dataUpdateConfig = dataUpdateConfig || {};
         if (dataUpdateConfig.runAsync) {
             return new Promise((resolve) => {
-                this.agGridAdapter
-                    .getAgGridApi()
-                    .applyTransactionAsync({ remove: dataRows }, (transaction) => {
+                this.applyAgGridTransactionAsync({ remove: dataRows }, (transaction) => {
                     if (typeof dataUpdateConfig.callback === 'function') {
                         dataUpdateConfig.callback(transaction);
                     }
@@ -2094,7 +2110,7 @@ You need to define at least one Layout!`);
             });
         }
         else {
-            const transaction = this.agGridAdapter.getAgGridApi().applyTransaction({
+            const transaction = this.applyAgGridTransaction({
                 remove: dataRows,
             });
             if (dataUpdateConfig.flushAsync) {
@@ -3176,7 +3192,14 @@ You need to define at least one Layout!`);
         });
         this.refreshCellsBasedOnCellDataChange(rowNode, cellDataChangedInfos);
         this.refreshColumnsBasedOnCellDataChange(cellDataChangedInfos);
-        this.filterOnDataChange();
+        const colIds = cellDataChangedInfos.map((c) => c.column.columnId);
+        const { columnFilterApi, gridFilterApi } = this.api.filterApi;
+        const isGridFilterActive = !!gridFilterApi.getCurrentGridFilterExpression();
+        const isColumnFilterActive = colIds.some((colId) => columnFilterApi.isColumnFilterActiveForColumn(colId));
+        const shouldFilter = isGridFilterActive || isColumnFilterActive;
+        if (shouldFilter) {
+            this.filterOnDataChange();
+        }
     }
     refreshCellsBasedOnCellDataChange(rowNode, cellDataChangedInfos) {
         //  Check if node is visible as otherwise AG Grid wont refresh

package/src/components/Dashboard/DashboardToolbar.js

@@ -11,8 +11,8 @@ function DashboardToolbar(props) {
         React.createElement("div", { className: "ab-Dashboard__toolbar-content" }, props.children),
         React.createElement(rebass_1.Flex, { className: "ab-Dashboard__toolbar-title", flexDirection: "row", alignItems: "center" },
             React.createElement("span", null, props.title),
-            props.showConfigure && (React.createElement(SimpleButton_1.default, { icon: "spanner", variant: "text", tone: "none", "data-name": "configure", iconSize: 16, marginLeft: 1, tooltip: props.tooltip || `Configure ${props.title}`, onClick: () => props.onConfigure() })),
+            props.showConfigure && (React.createElement(SimpleButton_1.default, { "aria-label": `Configure ${props.title}`, icon: "spanner", variant: "text", tone: "none", "data-name": "configure", iconSize: 16, marginLeft: 1, tooltip: props.tooltip || `Configure ${props.title}`, onClick: () => props.onConfigure() })),
             ' ',
-            props.showClose && (React.createElement(SimpleButton_1.default, { style: { alignSelf: 'flex-end' }, disabled: props.accessLevel == 'ReadOnly', "data-name": "close", icon: "close", variant: "text", tone: "none", iconSize: 16, marginLeft: 1, tooltip: props.tooltip || `Close ${props.title} Toolbar`, onClick: () => props.onClose() })))));
+            props.showClose && (React.createElement(SimpleButton_1.default, { "aria-label": `Close ${props.title}`, style: { alignSelf: 'flex-end' }, disabled: props.accessLevel == 'ReadOnly', "data-name": "close", icon: "close", variant: "text", tone: "none", iconSize: 16, marginLeft: 1, tooltip: props.tooltip || `Close ${props.title} Toolbar`, onClick: () => props.onClose() })))));
 }
 exports.DashboardToolbar = DashboardToolbar;

package/src/components/Icon/index.js

@@ -38,7 +38,7 @@ const IconComponent = (props) => {
         };
     }, [icon]);
     if ((0, exports.isAdaptableSystemIcon)(icon) && icon.name in icons_1.allIcons) {
-        return (React.createElement(icons_1.Icon, { name: icon.name, size: icon.size, style: icon.style, className: className }));
+        return (React.createElement(icons_1.Icon, { "aria-hidden": "true", name: icon.name, size: icon.size, style: icon.style, className: className }));
     }
     if ((0, exports.isAdaptableCustomIcon)(icon)) {
         let width = icon.style?.width ?? 'var(--ab-cmp-icon__width)';

package/src/components/InfiniteTable/index.d.ts

@@ -1,5 +1,5 @@
 import { InfiniteTableProps } from '@infinite-table/infinite-react';
 export * from '@infinite-table/infinite-react';
 import * as React from 'react';
-declare function InfiniteTable<T = any>(props: InfiniteTableProps<T>): React.JSX.Element;
-export { InfiniteTable };
+declare function InfiniteTableGrid<T = any>(props: InfiniteTableProps<T>): React.JSX.Element;
+export { InfiniteTableGrid };

package/src/components/InfiniteTable/index.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InfiniteTable = void 0;
+exports.InfiniteTableGrid = void 0;
 const tslib_1 = require("tslib");
 const infinite_react_1 = require("@infinite-table/infinite-react");
 tslib_1.__exportStar(require("@infinite-table/infinite-react"), exports);
 const EnvVars_1 = require("../../EnvVars");
 const React = tslib_1.__importStar(require("react"));
-function InfiniteTable(props) {
+function InfiniteTableGrid(props) {
     return (React.createElement(infinite_react_1.InfiniteTable, { sortable: false, rowHeight: '--ab-grid-row-height', draggableColumns: false, keyboardNavigation: false, ...props, licenseKey: EnvVars_1.INFINITE_TABLE_LICENSE_KEY }));
 }
-exports.InfiniteTable = InfiniteTable;
+exports.InfiniteTableGrid = InfiniteTableGrid;
 infinite_react_1.InfiniteTable.licenseKey = EnvVars_1.INFINITE_TABLE_LICENSE_KEY;

package/src/components/List/GridList/index.js

@@ -16,7 +16,7 @@ const GridList = (props) => {
         };
     }).filter((data) => !!data.item);
     return (React.createElement(InfiniteTable_1.DataSource, { data: data, primaryKey: "id" },
-        React.createElement(InfiniteTable_1.InfiniteTable, { header: false, showZebraRows: props.showZebraRows, rowHeight: props.rowHeight ?? '--ab-grid-row-height', domProps: {
+        React.createElement(InfiniteTable_1.InfiniteTableGrid, { header: false, showZebraRows: props.showZebraRows, rowHeight: props.rowHeight ?? '--ab-grid-row-height', domProps: {
                 className: (0, join_1.default)(baseClassName, props.className),
                 style: {
                     minHeight: '15rem',