@adaptabletools/adaptable 20.1.1 → 20.1.3

package/src/agGrid/AdaptableAgGrid.js

@@ -1954,6 +1954,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 +1983,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 +1995,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 +2015,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 +2028,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 +2055,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 +2073,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 +2094,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 +2106,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) {
@@ -3172,7 +3188,14 @@ You need to define at least one Layout!`);
         });
         this.refreshCellsBasedOnCellDataChange(rowNode, cellDataChangedInfos);
         this.refreshColumnsBasedOnCellDataChange(cellDataChangedInfos);
-        this.filterOnDataChange();
+        const colIds = cellDataChangedInfos.map((c) => c.column.columnId);
+        const { columnFilterApi, gridFilterApi } = this.api.filterApi;
+        const isGridFilterActive = !!gridFilterApi.getCurrentGridFilterExpression();
+        const isColumnFilterActive = colIds.some((colId) => columnFilterApi.isColumnFilterActiveForColumn(colId));
+        const shouldFilter = isGridFilterActive || isColumnFilterActive;
+        if (shouldFilter) {
+            this.filterOnDataChange();
+        }
     }
     refreshCellsBasedOnCellDataChange(rowNode, cellDataChangedInfos) {
         //  Check if node is visible as otherwise AG Grid wont refresh

package/src/components/Dashboard/DashboardToolbar.js

@@ -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() })))));
 }

package/src/components/Icon/index.js

@@ -34,7 +34,7 @@ export const IconComponent = (props) => {
         };
     }, [icon]);
     if (isAdaptableSystemIcon(icon) && icon.name in allIcons) {
-        return (React.createElement(Icon, { name: icon.name, size: icon.size, style: icon.style, className: className }));
+        return (React.createElement(Icon, { "aria-hidden": "true", name: icon.name, size: icon.size, style: icon.style, className: className }));
     }
     if (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

@@ -2,8 +2,8 @@ import { InfiniteTable as InfiniteTableComponent, } from '@infinite-table/infini
 export * from '@infinite-table/infinite-react';
 import { INFINITE_TABLE_LICENSE_KEY } from '../../EnvVars';
 import * as React from 'react';
-function InfiniteTable(props) {
+function InfiniteTableGrid(props) {
     return (React.createElement(InfiniteTableComponent, { sortable: false, rowHeight: '--ab-grid-row-height', draggableColumns: false, keyboardNavigation: false, ...props, licenseKey: INFINITE_TABLE_LICENSE_KEY }));
 }
 InfiniteTableComponent.licenseKey = INFINITE_TABLE_LICENSE_KEY;
-export { InfiniteTable };
+export { InfiniteTableGrid };

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DataSource, InfiniteTable } from '../../../components/InfiniteTable';
+import { DataSource, InfiniteTableGrid, } from '../../../components/InfiniteTable';
 import join from '../../utils/join';
 const baseClassName = 'ab-GridList';
 const columnsMap = {
@@ -13,7 +13,7 @@ const GridList = (props) => {
         };
     }).filter((data) => !!data.item);
     return (React.createElement(DataSource, { data: data, primaryKey: "id" },
-        React.createElement(InfiniteTable, { header: false, showZebraRows: props.showZebraRows, rowHeight: props.rowHeight ?? '--ab-grid-row-height', domProps: {
+        React.createElement(InfiniteTableGrid, { header: false, showZebraRows: props.showZebraRows, rowHeight: props.rowHeight ?? '--ab-grid-row-height', domProps: {
                 className: join(baseClassName, props.className),
                 style: {
                     minHeight: '15rem',

package/src/components/Select/Select.d.ts

@@ -43,6 +43,7 @@ export type SelectProps<SelectValue extends unknown, IsMulti extends boolean = f
     };
     onInputChange?: (value: string) => void;
     onMenuOpen?: VoidFunction;
+    'aria-label'?: string;
     size?: 'small' | 'normal';
     isCreatable?: boolean;
     menuPortalTarget?: HTMLElement;

package/src/components/Select/Select.js

@@ -365,7 +365,7 @@ export const Select = function (props) {
         setInputValue(value);
         props.onInputChange?.(value);
     }, [props.onInputChange, isMulti]);
-    return (React.createElement(SelectComponent, { ref: ref, inputValue: inputValue, onInputChange: onInputChange, onFocus: onFocus, onBlur: onBlur, onMenuOpen: props.onMenuOpen, isLoading: props.isLoading, options: props.options, className: join(props.className, 'ab-Select'), isDisabled: disabled, menuPlacement: props.menuPlacement ?? 'auto', isSearchable: props.searchable, hideSelectedOptions: false, isMulti: isMulti, value: selectedOption, blurInputOnSelect: false, menuPosition: props.menuPosition ?? 'absolute', 
+    return (React.createElement(SelectComponent, { ref: ref, "aria-label": props['aria-label'], inputValue: inputValue, onInputChange: onInputChange, onFocus: onFocus, onBlur: onBlur, onMenuOpen: props.onMenuOpen, isLoading: props.isLoading, options: props.options, className: join(props.className, 'ab-Select'), isDisabled: disabled, menuPlacement: props.menuPlacement ?? 'auto', isSearchable: props.searchable, hideSelectedOptions: false, isMulti: isMulti, value: selectedOption, blurInputOnSelect: false, menuPosition: props.menuPosition ?? 'absolute', 
         // This needed so the menu is not clipped by overflow: hidden
         menuPortalTarget: props.menuPortalTarget === undefined ? document.body : null, isClearable: props.isClearable, closeMenuOnSelect: props.closeMenuOnSelect, onChange: (option) => {
             if (isMulti) {

package/src/components/SimpleButton/index.js

@@ -81,7 +81,11 @@ const SimpleButton = React.forwardRef((givenProps, theRef) => {
     const fontWeight = buttonProps.fontWeight
         ? theme[buttonProps.fontWeight] ?? buttonProps.fontWeight ?? 'normal'
         : 'normal';
-    const btn = (React.createElement(Button, { ...buttonProps, disabled: disabled, className: join(className, baseClassName, disabled ? `${baseClassName}--disabled` : '', fontWeight ? `${baseClassName}--font-weight=${fontWeight}` : '', `${baseClassName}--variant-${variant}`, `${baseClassName}--tone-${tone}`), ref: theRef }, children));
+    const btn = (React.createElement(Button, { ...buttonProps, "aria-label": buttonProps['aria-label'] ||
+            buttonProps.label ||
+            tooltip ||
+            buttonProps.title ||
+            `${buttonProps.key}`, disabled: disabled, className: join(className, baseClassName, disabled ? `${baseClassName}--disabled` : '', fontWeight ? `${baseClassName}--font-weight=${fontWeight}` : '', `${baseClassName}--variant-${variant}`, `${baseClassName}--tone-${tone}`), ref: theRef }, children));
     return tooltip ? React.createElement(Tooltip, { label: tooltip }, btn) : btn;
 });
 export default SimpleButton;

package/src/env.js

@@ -1,5 +1,5 @@
 export default {
     NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1746613770593 || Date.now(),
-    VERSION: "20.1.1" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1747298992714 || Date.now(),
+    VERSION: "20.1.3" || '--current-version--',
 };

package/src/layout-manager/src/index.js

@@ -242,19 +242,28 @@ export class LayoutManager extends LMEmitter {
             : this.getTableLayoutModelFromGrid();
     }
     getPivotLayoutModelFromGrid() {
-        const pivotResultColumnsSet = new Set((this.gridApi.getPivotResultColumns() || []).map((col) => col.getColId()));
+        const pivotResultColumns = this.gridApi.getPivotResultColumns() || [];
+        const pivotResultColumnsSet = new Set(pivotResultColumns.map((col) => col.getColId()));
         const prevLayout = this.currentLayout;
         const columnState = this.gridApi
             .getColumnState()
             .filter((col) => !pivotResultColumnsSet.has(col.colId));
         let PivotColumns = this.gridApi.getPivotColumns().map((col) => col.getColId());
         const layout = this.getUndecidedLayoutModelFromGrid(columnState);
+        let ColumnWidths = layout.ColumnWidths || {};
+        //let's also include the column widths of the pivotResult columns
+        pivotResultColumns.forEach((col) => {
+            ColumnWidths[col.getColId()] = col.getActualWidth();
+        });
+        if (!Object.keys(ColumnWidths).length) {
+            ColumnWidths = undefined;
+        }
         delete layout.TableColumns;
         const pivotLayout = {
             PivotColumns,
             ColumnPinning: layout.ColumnPinning,
             ColumnSorts: layout.ColumnSorts,
-            ColumnWidths: layout.ColumnWidths,
+            ColumnWidths,
             ColumnVisibility: layout.ColumnVisibility,
             RowGroupValues: layout.RowGroupValues,
             PivotGroupedColumns: layout.RowGroupedColumns,
@@ -821,7 +830,10 @@ export class LayoutManager extends LMEmitter {
             return acc;
         }, {});
         columnState.applyOrder = true;
-        const columnIds = getColumnOrderIdsForAllColDefs([...layout.PivotColumns, ...layout.PivotAggregationColumns.map((col) => col.ColumnId)], this.gridApi.getColumnDefs());
+        const columnIds = getColumnOrderIdsForAllColDefs([
+            ...layout.PivotColumns,
+            ...(layout.PivotAggregationColumns || []).map((col) => col.ColumnId),
+        ], this.gridApi.getColumnDefs());
         const pivotAggsToIndexes = layout.PivotAggregationColumns.reduce((acc, { ColumnId }, index) => {
             acc[ColumnId] = index;
             return acc;
@@ -1036,6 +1048,23 @@ export class LayoutManager extends LMEmitter {
         // now recompute and apply the last one
         this.computePivotAggregations(layout, columnState);
         this.gridApi.applyColumnState(columnState);
+        // let's also include the column widths of the pivotResult columns
+        // we can't simply include those in the columnState because the columnState will also apply order
+        // but we don't want to affect the order of the pivotResult columns
+        // so we'll do it manually, and apply the widths after the columnState
+        // by using the gridApi.setColumnWidths method
+        if (layout.ColumnWidths) {
+            const colWidthForPivotResultColumns = [];
+            (this.gridApi.getPivotResultColumns() || []).forEach((col) => {
+                const colId = col.getColId();
+                if (layout.ColumnWidths[colId]) {
+                    colWidthForPivotResultColumns.push({ key: colId, newWidth: layout.ColumnWidths[colId] });
+                }
+            });
+            if (colWidthForPivotResultColumns.length) {
+                this.gridApi.setColumnWidths(colWidthForPivotResultColumns);
+            }
+        }
         this.applyPivotExpandLevel(layout);
         const hasGroupedColumns = layout.PivotGroupedColumns && layout.PivotGroupedColumns.length;
         // but also let's not forget to apply the row group values