@adaptabletools/adaptable-cjs 20.1.2 → 20.1.4

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

@@ -1561,8 +1561,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
@@ -1958,6 +1961,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 +1990,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 +2002,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 +2022,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 +2035,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 +2062,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 +2080,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 +2101,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 +2113,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) {
@@ -3030,7 +3049,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 = (0, LayoutHelpers_1.layoutStateToLayoutModel)(layout);
-        this.layoutManager?.setLayout(layoutModel, {
+        const layoutChanged = this.layoutManager?.setLayout(layoutModel, {
             skipApplyRowGroupsExpandedState: !shouldUpdateExpandState,
         });
         if (layout.AutoSizeColumns) {
@@ -3053,6 +3072,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) {
@@ -3176,7 +3204,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
@@ -3354,18 +3389,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

@@ -112,7 +112,7 @@ 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

@@ -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/Datepicker/index.js

@@ -14,9 +14,45 @@ const DatepickerContext_1 = require("./DatepickerContext");
 const react_day_picker_1 = require("react-day-picker");
 const AdaptableDateInlineInput_1 = require("../../View/Components/AdaptableInput/AdaptableDateInlineInput");
 const date_fns_1 = require("date-fns");
-const DatepickerOverlay = ({ onHide, children, onKeyDown, onMouseDown, }) => {
+const Select_1 = require("../Select");
+const onDatePickerDropdownKeyDown = (e) => {
+    if (e.key === 'Escape' || e.key === 'Enter') {
+        e.stopPropagation();
+    }
+};
+const DatePickerComponents = {
+    YearsDropdown: (props) => {
+        const onChange = (0, react_1.useCallback)((value) => {
+            props.onChange?.({
+                target: {
+                    value,
+                },
+            });
+        }, [props.onChange]);
+        return (React.createElement(Select_1.Select, { onKeyDown: onDatePickerDropdownKeyDown, value: props.value, onChange: onChange, options: props.options }));
+    },
+    MonthsDropdown: (props) => {
+        const onChange = (0, react_1.useCallback)((value) => {
+            props.onChange?.({
+                target: {
+                    value,
+                },
+            });
+        }, [props.onChange]);
+        return (React.createElement(Select_1.Select, { onKeyDown: onDatePickerDropdownKeyDown, value: `${props.value}`, onChange: onChange, options: props.options.map((option) => {
+                return {
+                    label: option.label,
+                    value: `${option.value}`,
+                };
+            }) }));
+    },
+};
+const DatepickerOverlay = ({ onHide, children, onKeyDown, onMouseDown, overlayDOMRef, }) => {
     const domRef = React.useRef(null);
-    return (React.createElement("div", { className: "ab-Datepicker-Overlay", ref: domRef, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onBlur: (e) => {
+    return (React.createElement("div", { className: "ab-Datepicker-Overlay", tabIndex: -1, ref: (el) => {
+            domRef.current = el;
+            overlayDOMRef.current = el;
+        }, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onBlur: (e) => {
             const { relatedTarget } = e;
             const node = domRef.current;
             // relatedTarget is the newly focused element as a result of this blur event
@@ -78,13 +114,14 @@ exports.Datepicker = React.forwardRef((props, ref) => {
             clearValue();
         }, accessLevel: 'Full' })) : null;
     const calendarButton = (React.createElement(SimpleButton_1.default, { disabled: disabled, variant: "text", icon: "calendar", tooltip: "Date", iconSize: 20, px: 0, py: 0, onClick: () => setVisible(true) }));
+    const overlayDOMRef = (0, react_1.useRef)(null);
     return (React.createElement(rebass_1.Flex, null,
-        React.createElement(OverlayTrigger_1.default, { visible: visible, render: () => (React.createElement(DatepickerOverlay, { onMouseDown: props.onMouseDown, onHide: () => setVisible(false), onKeyDown: (e) => {
+        React.createElement(OverlayTrigger_1.default, { visible: visible, render: () => (React.createElement(DatepickerOverlay, { overlayDOMRef: overlayDOMRef, onMouseDown: props.onMouseDown, onHide: () => setVisible(false), onKeyDown: (e) => {
                     if (e.key === 'Escape' || e.key === 'Enter') {
                         setVisible(false, e.key);
                     }
                 } },
-                React.createElement(react_day_picker_1.DayPicker, { fixedWeeks: true, autoFocus: autoFocus ?? true, showWeekNumber: showWeekNumber, showOutsideDays: showOutsideDays, mode: "single", captionLayout: "dropdown", month: isNaN(+month) ? new Date() : month, selected: value, onMonthChange: setMonth, onSelect: updateValue, startMonth: START_MONTH, endMonth: END_MONTH, footer: React.createElement(rebass_1.Flex, { justifyContent: "space-between", mt: 2, flexWrap: 'wrap' }, footerButtons) }))) },
+                React.createElement(react_day_picker_1.DayPicker, { fixedWeeks: true, autoFocus: autoFocus ?? true, showWeekNumber: showWeekNumber, showOutsideDays: showOutsideDays, mode: "single", captionLayout: "dropdown", month: isNaN(+month) ? new Date() : month, selected: value, onMonthChange: setMonth, onSelect: updateValue, startMonth: START_MONTH, endMonth: END_MONTH, components: DatePickerComponents, footer: React.createElement(rebass_1.Flex, { justifyContent: "space-between", mt: 2, flexWrap: 'wrap' }, footerButtons) }))) },
             React.createElement(FieldWrap_1.default, { ...boxProps, style: {
                     borderRadius: style?.borderRadius,
                     width: style?.width,
@@ -94,6 +131,14 @@ exports.Datepicker = React.forwardRef((props, ref) => {
                     if (!visible) {
                         setVisible(true);
                     }
+                }, onBlur: (e) => {
+                    const { relatedTarget } = e;
+                    const overlayDOMNode = overlayDOMRef.current;
+                    if ((overlayDOMNode && relatedTarget == overlayDOMNode) ||
+                        overlayDOMNode?.contains(relatedTarget)) {
+                        return;
+                    }
+                    setVisible(false);
                 } },
                 React.createElement(AdaptableDateInlineInput_1.AdaptableDateInlineInput, { ref: ref, value: inputValue, 
                     // We do not want to show the format when the date-picker is visible

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',