@adaptabletools/adaptable 20.1.2 → 20.1.4

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<{

package/src/agGrid/AdaptableAgGrid.js

@@ -1557,8 +1557,11 @@ You need to define at least one Layout!`);
         if (isPivot) {
             // let's also support the pivot result columns
             const pivotResultColumns = gridApi.getPivotResultColumns() || [];
+            const autoGroupColumns = gridApi
+                .getAllGridColumns()
+                .filter((column) => this.api.columnApi.isAutoRowGroupColumn(column.getColId()));
             if (pivotResultColumns.length) {
-                agGridCols = [...agGridCols, ...pivotResultColumns];
+                agGridCols = [...agGridCols, ...pivotResultColumns, ...autoGroupColumns];
             }
         }
         const columnGroupChildren = gridApi
@@ -1954,6 +1957,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);
@@ -1961,9 +1986,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);
                     }
@@ -1975,7 +1998,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) {
@@ -1995,7 +2018,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);
                     }
@@ -2008,7 +2031,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();
             }
@@ -2035,9 +2058,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);
                     }
@@ -2055,7 +2076,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,
@@ -2076,9 +2097,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);
                     }
@@ -2090,7 +2109,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) {
@@ -3026,7 +3045,7 @@ You need to define at least one Layout!`);
         // and is specific to Adaptable, therefore we need to refresh it manually
         this.refreshHeader();
         const layoutModel = layoutStateToLayoutModel(layout);
-        this.layoutManager?.setLayout(layoutModel, {
+        const layoutChanged = this.layoutManager?.setLayout(layoutModel, {
             skipApplyRowGroupsExpandedState: !shouldUpdateExpandState,
         });
         if (layout.AutoSizeColumns) {
@@ -3049,6 +3068,15 @@ You need to define at least one Layout!`);
                 plugin.afterSetLayout(this, layout);
             }
         });
+        if (!layoutChanged) {
+            // we won't get an onLayoutChange event
+            // most likely only filters have changed (column or grid filters)
+            // and because filters are not part of the layout manager
+            // there will be no change to the layout
+            // so we need to manually trigger the onLayoutChange event
+            // for other layout-related updates
+            this.onLayoutChange(layout, { skipRefresh: true });
+        }
         perfSetLayout.end();
     }
     getActiveAdaptableAggFuncForCol(columnId) {
@@ -3172,7 +3200,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
@@ -3350,18 +3385,21 @@ You need to define at least one Layout!`);
         };
         return hasPivotTotals(one) || hasPivotTotals(other);
     }
-    onLayoutChange(layout) {
+    onLayoutChange(layout, options) {
         this.logger.info('onLayoutChange()');
-        const prevOnChangeLayout = this.__prevLayoutForOnChange || this.api.layoutApi.getCurrentLayout();
-        // see #on-regroup-expect-group-column-to-be-recomputed-and-setup-properly
-        const rowGroupsChanged = this.isRowGroupDifferentInLayout(prevOnChangeLayout, layout);
-        const hasPivotTotalsInLayout = this.hasPivotTotalsInLayout(prevOnChangeLayout, layout);
-        const pivotColsChanged = JSON.stringify(layout.PivotColumns) !== JSON.stringify(prevOnChangeLayout.PivotColumns);
-        if (rowGroupsChanged || pivotColsChanged || hasPivotTotalsInLayout) {
-            this.updateColumnModelAndRefreshGrid();
-        }
-        else {
-            this.deriveAdaptableColumnStateFromAgGrid();
+        const skipRefresh = options?.skipRefresh;
+        if (!skipRefresh) {
+            const prevOnChangeLayout = this.__prevLayoutForOnChange || this.api.layoutApi.getCurrentLayout();
+            // see #on-regroup-expect-group-column-to-be-recomputed-and-setup-properly
+            const rowGroupsChanged = this.isRowGroupDifferentInLayout(prevOnChangeLayout, layout);
+            const hasPivotTotalsInLayout = this.hasPivotTotalsInLayout(prevOnChangeLayout, layout);
+            const pivotColsChanged = JSON.stringify(layout.PivotColumns) !== JSON.stringify(prevOnChangeLayout.PivotColumns);
+            if (rowGroupsChanged || pivotColsChanged || hasPivotTotalsInLayout) {
+                this.updateColumnModelAndRefreshGrid();
+            }
+            else {
+                this.deriveAdaptableColumnStateFromAgGrid();
+            }
         }
         this.__prevLayoutForOnChange = layout;
         this.api.layoutApi.createOrUpdateLayout(layout);

package/src/agGrid/AgGridExportAdapter.js

@@ -108,7 +108,7 @@ export class AgGridExportAdapter {
             };
         }
         catch (error) {
-            this.logger.consoleError(`Error exporting ${report.Name} in ${format} format to ${config.destination}`, error);
+            this.logger.consoleError(`Error exporting ${report.Name} in ${format} format to ${config.destination}`, error.message);
         }
         finally {
             /**

package/src/components/Dashboard/DashboardToolbar.js

@@ -7,7 +7,7 @@ export function DashboardToolbar(props) {
         React.createElement("div", { className: "ab-Dashboard__toolbar-content" }, props.children),
         React.createElement(Flex, { className: "ab-Dashboard__toolbar-title", flexDirection: "row", alignItems: "center" },
             React.createElement("span", null, props.title),
-            props.showConfigure && (React.createElement(SimpleButton, { 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, { "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, { 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, { "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() })))));
 }