@adaptabletools/adaptable 20.1.1 → 20.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable",
-  "version": "20.1.1",
+  "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

@@ -35,6 +35,7 @@ export 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

@@ -6,7 +6,7 @@ import Dropdown from '../../../components/Dropdown';
 import Input from '../../../components/Input';
 import { useRef, useState } from 'react';
 import StringExtensions from '../../../Utilities/Extensions/StringExtensions';
-import { DataSource, InfiniteTable } from '../../../components/InfiniteTable';
+import { DataSource, InfiniteTableGrid, } from '../../../components/InfiniteTable';
 import { Box, Flex } from 'rebass';
 import throttle from 'lodash/throttle';
 const dataTypes = [
@@ -331,7 +331,7 @@ const ColumnsList = ({ columns: cols, handle, onValidityChange, onChange, onSele
     };
     return (React.createElement(Box, { p: 2, style: { height: '100%' }, className: theme },
         React.createElement(DataSource, { data: data, primaryKey: "colId" },
-            React.createElement(InfiniteTable, { columnTypes: {
+            React.createElement(InfiniteTableGrid, { columnTypes: {
                     default: {
                         defaultFlex: 1,
                         align: 'center',

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

@@ -5,7 +5,7 @@ import { Box, Flex } from 'rebass';
 import Radio from '../../../components/Radio';
 import FormLayout, { FormRow } from '../../../components/FormLayout';
 import { ADAPTABLE_MODULE_MAP } from '../../../Utilities/Constants/ModuleConstants';
-import { DataSource, InfiniteTable } from '../../../components/InfiniteTable';
+import { DataSource, InfiniteTableGrid, } from '../../../components/InfiniteTable';
 const ALL_ENTITLEMENTS_MODULES = ALL_MODULES;
 const tableDOMProps = {
     style: {
@@ -106,7 +106,7 @@ const EntitlementsListForm = (props) => {
     }
     return (React.createElement(Box, { flex: 1, height: "100%", className: theme },
         React.createElement(DataSource, { data: data, primaryKey: "name" },
-            React.createElement(InfiniteTable, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }))));
+            React.createElement(InfiniteTableGrid, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }))));
 };
 const DefaultEntitlementForm = (props) => {
     const abOptions = props.adaptableOptions;

package/src/View/CellSummary/CellSummaryDetails.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import EmptyContent from '../../components/EmptyContent';
-import { DataSource, InfiniteTable } from '../../components/InfiniteTable';
+import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
 const columnsMap = {
     Operation: { field: 'Operation', defaultFlex: 1 },
     Value: { field: 'Value', defaultFlex: 1 },
@@ -25,7 +25,7 @@ export class CellSummaryDetails extends React.Component {
             });
         }
         return (React.createElement(React.Fragment, null, this.props.CellSummary != null ? (React.createElement(DataSource, { data: data, primaryKey: "Operation" },
-            React.createElement(InfiniteTable, { domProps: tableDOMProps, columns: columnsMap }))) : (React.createElement(EmptyContent, null,
+            React.createElement(InfiniteTableGrid, { domProps: tableDOMProps, columns: columnsMap }))) : (React.createElement(EmptyContent, null,
             React.createElement("p", null, "No cells are selected - please select some cells.")))));
     }
 }

package/src/View/CellSummary/CellSummaryViewPanel.js

@@ -56,10 +56,10 @@ class CellSummaryViewPanelComponent extends React.Component {
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(Flex, { flexDirection: "row", className: shouldDisable ? GeneralConstants.READ_ONLY_STYLE : `ab-${elementType}__CellSummary__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             React.createElement(Flex, { flex: 1 },
-                React.createElement(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, { "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(Flex, { alignItems: "center", ml: 2 }, React.createElement(React.Fragment, null,
                 renderOperationValue(),
-                this.props.CellSummary != null && this.props.CellSummary.Count > 0 && (React.createElement(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, { 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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { Box, Flex } from 'rebass';
 import FormLayout, { FormRow } from '../../components/FormLayout';
-import { DataSource, InfiniteTable } from '../../components/InfiniteTable';
+import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
 import Panel from '../../components/Panel';
 import { Tabs } from '../../components/Tabs';
 import { useAdaptable } from '../AdaptableContext';
@@ -156,7 +156,7 @@ const ColumnDefPreview = (props) => {
             Value: { field: 'Value', header: 'Value', defaultFlex: 3 },
         };
         return (React.createElement(DataSource, { data: keyValuePairs, primaryKey: "Key" },
-            React.createElement(InfiniteTable, { domProps: domProps, columns: columnsMap })));
+            React.createElement(InfiniteTableGrid, { domProps: domProps, columns: columnsMap })));
     }
 };
 const ModuleView = (props) => {

package/src/View/Comments/CommentsPopup.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { DataSource, InfiniteTable } from '../../components/InfiniteTable';
+import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
 import Panel from '../../components/Panel';
 import { Box, Flex } from 'rebass';
 import { useAdaptable } from '../AdaptableContext';
@@ -83,7 +83,7 @@ const CellComments = (props) => {
                     adaptable.api.commentApi.deleteCommentThread(props.commentThread);
                 } })) },
         React.createElement(DataSource, { data: props.commentThread.Comments, primaryKey: "Uuid" },
-            React.createElement(InfiniteTable, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }))));
+            React.createElement(InfiniteTableGrid, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }))));
 };
 export const CommentsPopup = (props) => {
     const commentThreads = useSelector((state) => {

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

@@ -109,6 +109,9 @@ export const ColumnFilterInput = ({ type, value, onChange: onChangeProp, onClear
                     if (isNaN(numericValue)) {
                         numericValue = null;
                         liveValue = null;
+                        if (value === '-') {
+                            liveValue = value;
+                        }
                     }
                     else {
                         const prevValueHasSeparator = prevValue.includes('.');

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

@@ -8,7 +8,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...');
 };
 export function useDistinctFilterColumnValues(options) {
     const { columnId, searchValueRef } = options;

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

@@ -13,7 +13,7 @@ export const AdaptableFormControlTextClear = React.forwardRef((props, ref) => {
             width: '100%',
             ...props.style,
         } },
-        React.createElement(Input, { autoFocus: props.autoFocus, style: props.inputStyle, ref: (r) => {
+        React.createElement(Input, { "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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { AdaptablePopover } from '../AdaptablePopover';
-import { DataSource, InfiniteTable } from '../../components/InfiniteTable';
+import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
 import CheckIcon from '../../components/icons/check';
 import UIHelper from '../UIHelper';
 import Panel from '../../components/Panel';
@@ -58,7 +58,7 @@ export class PreviewResultsPanel extends React.Component {
                 },
             } },
             React.createElement(DataSource, { data: dataSource, primaryKey: "Id" },
-                React.createElement(InfiniteTable, { sortable: false, domProps: tableDOMProps, columns: columnsMap })))) : null;
+                React.createElement(InfiniteTableGrid, { sortable: false, domProps: tableDOMProps, columns: columnsMap })))) : null;
     }
     getValidationErrorMessage(alertDefinitions) {
         let validationService = this.props.api.internalApi.getValidationService();

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

@@ -33,7 +33,7 @@ export const BulkUpdateValueSelector = (props) => {
             ]), onChange: (value) => {
                 props.onColumnValueChange(value || null);
             } })));
-    const input = (React.createElement(AdaptableInput, { "data-name": "bulkupdate-value-input", type: props.selectedColumn
+    const input = (React.createElement(AdaptableInput, { "data-name": "bulkupdate-value-input", "aria-label": "Bulk Update Value Input", type: props.selectedColumn
             ? UIHelper.getDescriptionForDataType(props.selectedColumn.dataType)
             : 'text', placeholder: props.selectedColumn
             ? UIHelper.getPlaceholderForDataType(props.selectedColumn.dataType)
@@ -42,7 +42,7 @@ export const BulkUpdateValueSelector = (props) => {
         } }));
     let valueTypeSelector = null;
     if (isDateType) {
-        valueTypeSelector = (React.createElement(Select, { options: [
+        valueTypeSelector = (React.createElement(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

@@ -97,5 +97,5 @@ export const PermittedValuesSelector = function (props) {
             reload();
         }
     };
-    return (React.createElement(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, { "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 }));
 };

package/src/View/Components/WizardSummaryPage.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import WizardPanel from '../../components/WizardPanel';
-import { DataSource, InfiniteTable } from '../../components/InfiniteTable';
+import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
 const columnsMap = {
     Key: { field: 'Key', header: 'Property', defaultFlex: 1 },
     Value: { field: 'Value', header: 'Value', defaultFlex: 3 },
@@ -15,5 +15,5 @@ const tableDOMProps = {
 export const WizardSummaryPage = (props) => {
     return (React.createElement(WizardPanel, { bodyProps: { padding: 0 }, className: "ab-WizardSummary", "data-name": 'wizard-summary' },
         React.createElement(DataSource, { data: props.KeyValuePairs, primaryKey: "Key" },
-            React.createElement(InfiniteTable, { showZebraRows: true, domProps: tableDOMProps, columns: columnsMap }))));
+            React.createElement(InfiniteTableGrid, { showZebraRows: true, domProps: tableDOMProps, columns: columnsMap }))));
 };

package/src/View/Dashboard/CustomDashboardButton.js

@@ -19,7 +19,7 @@ export const CustomDashboardButton = (props) => {
         return null;
     }
     const disabled = button.disabled && button.disabled(button, dashboardContext);
-    return (React.createElement(SimpleButton, { key: buttonLabel, variant: buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text', tone: buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none', className: `ab-DashboardToolbar__Home__${kebabCase(buttonLabel)} ${buttonStyle?.className || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled || props.accessLevel == 'ReadOnly', onClick: () => {
+    return (React.createElement(SimpleButton, { key: buttonLabel, "aria-label": buttonLabel, variant: buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text', tone: buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none', className: `ab-DashboardToolbar__Home__${kebabCase(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

@@ -65,7 +65,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(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__${kebabCase(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(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__${kebabCase(menuItem.label)}`, icon: menuItem.icon, tooltip: menuItem.label, disabled: props.accessLevel == 'ReadOnly', onClick: () => props.dispatch(menuItem.reduxAction), accessLevel: 'Full', style: menuItem.category === 'SystemStatus'
                             ? {
                                 ...UIHelper.getStyleForMessageType(props.api.systemStatusApi.getCurrentSystemStatusMessageInfo()?.statusType ??
                                     'Success'),
@@ -89,7 +89,7 @@ const DashboardComponent = (props) => {
     };
     const renderQuickSearch = () => {
         return (React.createElement(Box, { ml: 2 },
-            React.createElement(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, { 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

@@ -12,7 +12,7 @@ const SystemDashboardToolbarFactory = (props) => {
     const accessLevel = adaptable.api.entitlementApi.getEntitlementAccessLevelForModule(props.toolbarName);
     const moduleToolbarView = 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

@@ -20,21 +20,20 @@ export const DataChangeHistoryViewPanelControl = (props) => {
     const handleOpenPopup = React.useCallback(() => {
         adaptable.api.settingsPanelApi.openSettingsPanel('DataChangeHistory');
     }, []);
-    const { changeHistoryMode, activationTime, suspensionTime } = useSelector((state) => ({
-        changeHistoryMode: state.Internal.DataChangeHistory.currentMode,
-        activationTime: state.Internal.DataChangeHistory.enableTime,
-        suspensionTime: state.Internal.DataChangeHistory.suspendTime,
-    }));
+    const dataChangeHistoryState = 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(Flex, { className: "ab-DataChangeHistoryPanel--button-panel", paddingY: buttonsPaddingY, style: { gap: gap } },
-        disabled && (React.createElement(ButtonPlay, { className: "ab-DataChangeHistoryPanel--button-activate", "data-name": 'data-change-history--button-activate', tooltip: '', onClick: () => onChangeHistoryEnable() })),
-        suspended && (React.createElement(ButtonPlay, { className: "ab-DataChangeHistoryPanel--button-resume", "data-name": 'data-change-history--button-resume', tooltip: 'Resume tracking data changes', onClick: () => onChangeHistoryResume() })),
-        enabled && (React.createElement(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, { className: "ab-DataChangeHistoryPanel--button-deactivate", "data-name": 'data-change-history--button-deactivate', tooltip: 'Deactivate data change tracking', onClick: () => onChangeHistoryDisable() }))));
+        disabled && (React.createElement(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, { "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, { "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, { "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(Flex, { className: "ab-DataChangeHistoryPanel--status-panel", alignItems: 'center', style: { gap: gap } },
         enabled && (React.createElement(Tooltip, { label: !!activationTime && `since ${DateFormatter(activationTime, { Pattern: dateFormat })}` },

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

@@ -4,7 +4,7 @@ import { CheckBox } from '../../../../components/CheckBox';
 import DropdownButton from '../../../../components/DropdownButton';
 import HelpBlock from '../../../../components/HelpBlock';
 import { Icon } from '../../../../components/icons';
-import { DataSource, InfiniteTable, } from '../../../../components/InfiniteTable';
+import { DataSource, InfiniteTableGrid, } from '../../../../components/InfiniteTable';
 import { Tabs } from '../../../../components/Tabs';
 import { Tag } from '../../../../components/Tag';
 import { useAdaptable } from '../../../AdaptableContext';
@@ -114,7 +114,7 @@ export const ColumnsSection = (props) => {
             React.createElement(Tabs.Tab, null, "Columns"),
             React.createElement(Tabs.Content, null,
                 React.createElement(DataSource, { data: props.columnsMap, primaryKey: 'field' },
-                    React.createElement(InfiniteTable, { columnPinning: {
+                    React.createElement(InfiniteTableGrid, { columnPinning: {
                             valid: 'end',
                             type: 'end',
                         }, columnTypes: {

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

@@ -2,7 +2,7 @@ import flatten from 'lodash/flatten';
 import * as React from 'react';
 import HelpBlock from '../../../../components/HelpBlock';
 import { Icon } from '../../../../components/icons';
-import { DataSource, InfiniteTable, } from '../../../../components/InfiniteTable';
+import { DataSource, InfiniteTableGrid, } from '../../../../components/InfiniteTable';
 import { Tag } from '../../../../components/Tag';
 import { useAdaptable } from '../../../AdaptableContext';
 import { AdaptablePopover } from '../../../AdaptablePopover';
@@ -139,7 +139,7 @@ export const DataPreview = (props) => {
             });
             props.onDataChange(newRowData);
         } },
-        React.createElement(InfiniteTable, { columnPinning: {
+        React.createElement(InfiniteTableGrid, { columnPinning: {
                 valid: 'end',
                 type: 'end',
             }, columnTypes: {

package/src/View/DataSet/DataSetViewPanel.js

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

package/src/View/Export/ReportFormatSelector.js

@@ -16,5 +16,5 @@ export const ReportFormatSelector = (props) => {
     });
     const elementType = props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
     return (React.createElement(Flex, { "data-name": "report-format-selector", flex: 1, minWidth: 140 },
-        React.createElement(Select, { style: { width: '100%' }, size: size, placeholder: 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.createElement(Select, { "aria-label": SELECT_REPORT_FORMAT_STRING, style: { width: '100%' }, size: size, placeholder: 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 })));
 };

package/src/View/Export/ReportNameSelector.js

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

package/src/View/Filter/FilterViewPanel.js

@@ -29,8 +29,8 @@ class FilterViewPanelComponent extends React.Component {
         return (React.createElement(Flex, { flexDirection: "row", className: `ab-${elementType}__Filter__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             React.createElement(Flex, null,
                 ArrayExtensions.IsNotNullOrEmpty(this.props.ColumnFilters) && (React.createElement(AdaptablePopover, { popupPadding: 0, className: `ab-${elementType}__Filter__info`, headerText: "", bodyText: [React.createElement(ActiveFiltersPanel, null)], useButton: true, showEvent: 'focus', hideEvent: "blur", popoverMinWidth: 400 })),
-                React.createElement(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, { className: join(`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, { "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, { "aria-label": isAtLeastOneFilterActive ? 'Suspend All Filters' : 'Resume All Filters', className: join(`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(Flex, { alignItems: "center" }, this.props.api.filterApi.columnFilterApi.isQuickFilterAvailable() && (React.createElement(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

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

package/src/View/Layout/LayoutViewPanel.js

@@ -40,7 +40,7 @@ const LayoutViewPanelComponent = (props) => {
     const layoutSelectStyle = elementType === 'ToolPanel' ? { minWidth: '100%' } : {};
     return (React.createElement(Flex, { flexDirection: "row", className: `ab-${elementType}__Layout__wrap`, flexWrap: viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
         React.createElement(Flex, { style: layoutSelectStyle, flex: 1 },
-            React.createElement(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, { "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(Flex, { flexDirection: "row", className: join(accessLevel === 'ReadOnly' ? GeneralConstants.READ_ONLY_STYLE : '', `ab-${elementType}__Layout__wrap`) },
             React.createElement(ButtonEdit, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name), tooltip: LAYOUT_EDIT_TOOLTIP, className: `ab-${elementType}__Layout__edit`, accessLevel: entityAccessLevel }),
             React.createElement(ButtonClone, { disabled: isErrorLayout, onClick: () => api.layoutApi.showLayoutEditor(layoutEntity.Name, isPivotLayout(layoutEntity) ? 'pivot' : 'table', 'Clone'), tooltip: LAYOUT_CLONE_TOOLTIP, className: `ab-${elementType}__Layout__clone`, tone: "neutral", variant: "text", children: null, accessLevel: cloneAccessLevel }),

package/src/View/Layout/PivotDetailsPopoup.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataSource, InfiniteTable } from '../../components/InfiniteTable';
+import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
 import { useAdaptable } from '../AdaptableContext';
 const tableDOMProps = {
     style: {
@@ -69,5 +69,5 @@ export const PivotDetailsPopoup = (props) => {
         };
     }, [props.popupProps]);
     return (React.createElement(DataSource, { data: data, primaryKey: columnId },
-        React.createElement(InfiniteTable, { columnTypes: columnTypes, domProps: tableDOMProps, columns: columns })));
+        React.createElement(InfiniteTableGrid, { columnTypes: columnTypes, domProps: tableDOMProps, columns: columns })));
 };

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

@@ -1,4 +1,4 @@
-import { DataSource, InfiniteTable, } from '../../../../components/InfiniteTable';
+import { DataSource, InfiniteTableGrid, } from '../../../../components/InfiniteTable';
 import * as React from 'react';
 import { Box, Flex, Text } from 'rebass';
 import DropdownButton from '../../../../components/DropdownButton';
@@ -129,7 +129,7 @@ export const ColumnsSectionSummary = () => {
         },
     };
     return (React.createElement(DataSource, { data: data, primaryKey: "columnId" },
-        React.createElement(InfiniteTable, { columnTypes: columnTypes, rowHeight: rowHeight, columnHeaderHeight: headerHeight, domProps: tableDOMProps, columns: columns })));
+        React.createElement(InfiniteTableGrid, { columnTypes: columnTypes, rowHeight: rowHeight, columnHeaderHeight: headerHeight, domProps: tableDOMProps, columns: columns })));
 };
 const ColumnRow = (props) => {
     const [isExpanded, setIsExpanded] = React.useState(false);

package/src/View/Note/NotePopup.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
-import { DataSource, InfiniteTable } from '../../components/InfiniteTable';
+import { DataSource, InfiniteTableGrid } from '../../components/InfiniteTable';
 import { GetAllNotesSelector } from '../../Redux/ActionsReducers/NoteRedux';
 import { useAdaptable } from '../AdaptableContext';
 import { AdaptableButtonComponent } from '../Components/AdaptableButton';
@@ -87,5 +87,5 @@ export const NotePopup = (props) => {
                     }
                 }
             } },
-            React.createElement(InfiniteTable, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }))));
+            React.createElement(InfiniteTableGrid, { columnTypes: columnTypes, headerOptions: headerOptions, domProps: tableDOMProps, columns: columnsMap }))));
 };

package/src/View/SmartEdit/SmartEditViewPanel.js

@@ -66,7 +66,7 @@ class SmartEditViewPanelComponent extends React.Component {
         const elementType = this.props.viewType === 'Toolbar' ? 'DashboardToolbar' : 'ToolPanel';
         return (React.createElement(Flex, { flexDirection: "row", className: `ab-${elementType}__SmartEdit__wrap`, flexWrap: this.props.viewType === 'ToolPanel' ? 'wrap' : 'nowrap' },
             React.createElement(Flex, null,
-                React.createElement(Select, { value: typeof this.props.SmartEditOperation === 'object'
+                React.createElement(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, { style: {

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

@@ -17,7 +17,7 @@ export const LoadButton = (props) => {
         });
     };
     return (React.createElement(SimpleButton, { ...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

@@ -23,7 +23,7 @@ export const ThemeSelector = (props) => {
             label: theme.Description,
         };
     });
-    return (React.createElement(Select, { "data-name": "select-theme-dropdown", searchable: false, options: optionThemes, value: currentTheme, disabled: disabled, size: props.size, onChange: (themeName) => {
+    return (React.createElement(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<{