@adaptabletools/adaptable-cjs 23.0.0-canary.1 → 23.0.0-canary.10

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

@@ -5,6 +5,7 @@ const infinite_react_1 = require("@infinite-table/infinite-react");
 const isPivotLayoutModel_1 = require("./isPivotLayoutModel");
 const LMEmitter_1 = require("./LMEmitter");
 const normalizeLayoutModel_1 = require("./normalizeLayoutModel");
+const rowGroupDisplayType_1 = require("./rowGroupDisplayType");
 const isLayoutEqual_1 = require("./isLayoutEqual");
 const simplifyLayoutModel_1 = require("./simplifyLayoutModel");
 const sortColumnIdsByOrder_1 = require("./sortColumnIdsByOrder");
@@ -12,7 +13,6 @@ const destructurePivotColumnId_1 = require("./destructurePivotColumnId");
 const isPivotAggTotalColumn_1 = require("./isPivotAggTotalColumn");
 const isPivotGrandTotal_1 = require("./isPivotGrandTotal");
 const isPivotColumnTotal_1 = require("./isPivotColumnTotal");
-const ParameterizedAggregationRegistry_1 = require("../../Aggregation/ParameterizedAggregationRegistry");
 const devTools_1 = require("../../devTools");
 exports.PIVOT_ANY_TOTAL_COL_TYPE = 'pivotAnyTotal';
 exports.PIVOT_GRAND_TOTAL_COL_TYPE = 'pivotGrandTotal';
@@ -493,9 +493,13 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
             // if it's different from the initial default column width
             else if (colState.width && initialWidth != colState.width) {
                 const colSizing = { ...ColumnSizing[colId] };
-                delete colSizing.Flex;
-                colSizing.Width = colState.width;
-                ColumnSizing[colId] = colSizing;
+                // Flex columns often report a computed width without flex in column state —
+                // keep explicit Flex sizing from the layout instead of replacing it with pixels.
+                if (colSizing.Flex == null) {
+                    delete colSizing.Flex;
+                    colSizing.Width = colState.width;
+                    ColumnSizing[colId] = colSizing;
+                }
             }
             if (colState.hide) {
                 acc[colId] = false;
@@ -525,24 +529,18 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
             });
         }
         if (gridState.aggregation) {
-            TableAggregationColumns = gridState.aggregation.aggregationModel
-                .map((agg) => {
+            TableAggregationColumns = gridState.aggregation.aggregationModel.map((agg) => {
                 const prevAggForColumn = prevAggColumnsMap?.[agg.colId];
                 if (prevAggForColumn && prevAggForColumn.AggFunc.aggFunc === agg.aggFunc) {
                     return prevAggForColumn;
                 }
-                // Parameterized aggs require layout metadata (e.g. weight column); ignore incomplete picks.
-                if ((0, ParameterizedAggregationRegistry_1.isParameterizedAggFuncName)(agg.aggFunc)) {
-                    return prevAggForColumn ?? null;
-                }
                 return {
                     ColumnId: agg.colId,
                     AggFunc: {
                         aggFunc: agg.aggFunc,
                     },
                 };
-            })
-                .filter(Boolean);
+            });
         }
         // if there's a current layout set
         // we want to only return the AG Grid columns that are also in the current layout
@@ -555,7 +553,7 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
                 if (groupDisplayType === 'singleColumn') {
                     colsInLayout.add(normalizeLayoutModel_1.AUTO_GROUP_COLUMN_ID__SINGLE);
                 }
-                else {
+                else if (groupDisplayType === 'multipleColumns') {
                     this.currentLayout.RowGroupedColumns.forEach((colId) => {
                         colsInLayout.add(`${normalizeLayoutModel_1.AUTO_GROUP_COLUMN_ID__MULTI_PREFIX}${colId}`);
                     });
@@ -763,7 +761,7 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
             ColumnGroupValues,
             GrandTotalRow: this.gridApi.getGridOption('grandTotalRow'),
             SuppressAggFuncInHeader: this.gridApi.getGridOption('suppressAggFuncInHeader'),
-            RowGroupDisplayType: this.gridApi.getGridOption('groupDisplayType') === 'multipleColumns' ? 'multi' : 'single',
+            RowGroupDisplayType: (0, rowGroupDisplayType_1.gridOptionToRowGroupDisplayType)(this.gridApi.getGridOption('groupDisplayType')),
             RowSelection: this.getRowSelectionFromGrid(),
         });
         return layout;
@@ -1317,7 +1315,7 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
             // this.gridApi.applyColumnState(state);
             const hasGroupedColumns = layout.RowGroupedColumns && layout.RowGroupedColumns.length;
             if (hasGroupedColumns) {
-                const displayTypeFromLayout = layout.RowGroupDisplayType === 'multi' ? 'multipleColumns' : 'singleColumn';
+                const displayTypeFromLayout = (0, rowGroupDisplayType_1.rowGroupDisplayTypeToGridOption)(layout.RowGroupDisplayType);
                 const groupDisplayType = this.gridApi.getGridOption('groupDisplayType');
                 if (groupDisplayType !== displayTypeFromLayout) {
                     this.gridApi.setGridOption('groupDisplayType', displayTypeFromLayout);
@@ -1680,7 +1678,7 @@ class LayoutManager extends LMEmitter_1.LMEmitter {
             this.applyPivotTotals(layout);
             const hasGroupedColumns = layout.PivotGroupedColumns && !!layout.PivotGroupedColumns.length;
             if (hasGroupedColumns) {
-                const displayTypeFromLayout = layout.RowGroupDisplayType === 'multi' ? 'multipleColumns' : 'singleColumn';
+                const displayTypeFromLayout = (0, rowGroupDisplayType_1.rowGroupDisplayTypeToGridOption)(layout.RowGroupDisplayType);
                 const groupDisplayType = this.gridApi.getGridOption('groupDisplayType');
                 if (groupDisplayType !== displayTypeFromLayout) {
                     this.gridApi.setGridOption('groupDisplayType', displayTypeFromLayout);

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

@@ -4,8 +4,7 @@ exports.logChanges = exports.getChanges = void 0;
 exports.isTableLayoutEqual = isTableLayoutEqual;
 exports.isPivotLayoutEqual = isPivotLayoutEqual;
 exports.isLayoutEqual = isLayoutEqual;
-const tslib_1 = require("tslib");
-const isEqual_1 = tslib_1.__importDefault(require("../../Utilities/utils/isEqual"));
+const ObjectExtensions_1 = require("../../Utilities/Extensions/ObjectExtensions");
 const infinite_react_1 = require("@infinite-table/infinite-react");
 const isPivotLayoutModel_1 = require("./isPivotLayoutModel");
 const normalizeLayoutModel_1 = require("./normalizeLayoutModel");
@@ -25,7 +24,7 @@ const getChanges = (l1, l2) => {
     const allKeys = new Set([...k1, ...k2]);
     const changes = [];
     for (const key of allKeys) {
-        if (!(0, isEqual_1.default)(l1[key], l2[key])) {
+        if (!(0, ObjectExtensions_1.isEqual)(l1[key], l2[key])) {
             changes.push({ key, value1: l1[key], value2: l2[key] });
         }
     }
@@ -48,7 +47,7 @@ function isTableLayoutEqual(l1, l2) {
     l2 = (0, normalizeLayoutModel_1.normalizeTableLayoutModel)(l2);
     clearIgnoredProperties(l1);
     clearIgnoredProperties(l2);
-    const res = (0, isEqual_1.default)(l1, l2);
+    const res = (0, ObjectExtensions_1.isEqual)(l1, l2);
     if (!res) {
         (0, exports.logChanges)(l1, l2);
     }
@@ -73,7 +72,7 @@ function isPivotLayoutEqual(l1, l2) {
     l2 = (0, normalizeLayoutModel_1.normalizePivotLayoutModel)(l2);
     clearIgnoredProperties(l1);
     clearIgnoredProperties(l2);
-    const res = (0, isEqual_1.default)(l1, l2);
+    const res = (0, ObjectExtensions_1.isEqual)(l1, l2);
     if (!res) {
         (0, exports.logChanges)(l1, l2);
     }

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

@@ -5,6 +5,7 @@ exports.normalizeTableLayoutModel = normalizeTableLayoutModel;
 exports.normalizePivotLayoutModel = normalizePivotLayoutModel;
 exports.normalizeLayoutModel = normalizeLayoutModel;
 const isPivotLayoutModel_1 = require("./isPivotLayoutModel");
+const rowGroupDisplayType_1 = require("./rowGroupDisplayType");
 exports.AUTO_GROUP_COLUMN_ID__SINGLE = 'ag-Grid-AutoColumn';
 exports.AUTO_GROUP_COLUMN_ID__MULTI_PREFIX = 'ag-Grid-AutoColumn-';
 function normalizeTableLayoutModel(layout, options) {
@@ -66,7 +67,10 @@ function normalizeTableLayoutModel(layout, options) {
             displayType = displayType || 'single';
             layout.RowGroupDisplayType = displayType;
         }
-        if (displayType === 'single') {
+        if (displayType === 'groupRows') {
+            layout.TableColumns = layout.TableColumns.filter((colId) => !(0, rowGroupDisplayType_1.isRowGroupAutoColumnId)(colId));
+        }
+        else if (displayType === 'single') {
             if (!ColumnOrderSet.has(exports.AUTO_GROUP_COLUMN_ID__SINGLE)) {
                 layout.TableColumns = [exports.AUTO_GROUP_COLUMN_ID__SINGLE, ...layout.TableColumns];
             }

package/src/layout-manager/src/rowGroupDisplayType.d.ts

@@ -0,0 +1,6 @@
+import { GridOptions } from 'ag-grid-enterprise';
+import { RowGroupDisplayType } from '../../AdaptableState/LayoutState';
+export type { RowGroupDisplayType };
+export declare function rowGroupDisplayTypeToGridOption(displayType: RowGroupDisplayType | undefined): GridOptions['groupDisplayType'];
+export declare function gridOptionToRowGroupDisplayType(groupDisplayType: GridOptions['groupDisplayType'] | undefined): RowGroupDisplayType;
+export declare function isRowGroupAutoColumnId(colId: string): boolean;

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

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.rowGroupDisplayTypeToGridOption = rowGroupDisplayTypeToGridOption;
+exports.gridOptionToRowGroupDisplayType = gridOptionToRowGroupDisplayType;
+exports.isRowGroupAutoColumnId = isRowGroupAutoColumnId;
+const normalizeLayoutModel_1 = require("./normalizeLayoutModel");
+function rowGroupDisplayTypeToGridOption(displayType) {
+    switch (displayType ?? 'single') {
+        case 'multi':
+            return 'multipleColumns';
+        case 'groupRows':
+            return 'groupRows';
+        case 'single':
+        default:
+            return 'singleColumn';
+    }
+}
+function gridOptionToRowGroupDisplayType(groupDisplayType) {
+    if (groupDisplayType === 'multipleColumns') {
+        return 'multi';
+    }
+    if (groupDisplayType === 'groupRows') {
+        return 'groupRows';
+    }
+    return 'single';
+}
+function isRowGroupAutoColumnId(colId) {
+    return colId === normalizeLayoutModel_1.AUTO_GROUP_COLUMN_ID__SINGLE || colId.startsWith(normalizeLayoutModel_1.AUTO_GROUP_COLUMN_ID__MULTI_PREFIX);
+}

package/src/lib/utils.d.ts

@@ -1,3 +1,23 @@
 import { type ClassValue } from 'clsx';
 export declare function cn(...inputs: ClassValue[]): string;
 export declare const POPUP_Z_INDEX = "twa:z-[9999999]";
+export declare const getFocusableElements: (root: HTMLElement) => HTMLElement[];
+type CaptureTabEvent = Pick<KeyboardEvent, 'key' | 'shiftKey' | 'preventDefault'>;
+type CaptureTabTarget = HTMLElement | null | {
+    current: HTMLElement | null;
+};
+/**
+ * Traps Tab / Shift+Tab navigation within `node` so focus cycles between the
+ * first and last focusable elements instead of escaping the container.
+ *
+ * Only acts when the currently focused element is within `node` — popups that
+ * portal elsewhere (selects, datepickers) keep managing their own navigation.
+ *
+ * `node` may be an element directly or a React ref to one.
+ *
+ * Can be called directly (`captureTab(node, event)`) or curried by omitting the
+ * event (`captureTab(node)`) to get a handler that only expects the event.
+ */
+export declare function captureTab(node: CaptureTabTarget): (event: CaptureTabEvent) => void;
+export declare function captureTab(node: CaptureTabTarget, event: CaptureTabEvent): void;
+export {};

package/src/lib/utils.js

@@ -1,10 +1,57 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.POPUP_Z_INDEX = void 0;
+exports.getFocusableElements = exports.POPUP_Z_INDEX = void 0;
 exports.cn = cn;
+exports.captureTab = captureTab;
 const clsx_1 = require("clsx");
 const twMerge_1 = require("../twMerge");
 function cn(...inputs) {
     return (0, twMerge_1.twMerge)((0, clsx_1.clsx)(inputs));
 }
 exports.POPUP_Z_INDEX = 'twa:z-[9999999]';
+const FOCUSABLE_SELECTOR = [
+    'a[href]',
+    'button:not([disabled])',
+    'input:not([disabled])',
+    'select:not([disabled])',
+    'textarea:not([disabled])',
+    '[tabindex]:not([tabindex="-1"])',
+].join(',');
+const getFocusableElements = (root) => {
+    return Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter((el) => {
+        if (el.hasAttribute('disabled') || el.getAttribute('aria-hidden') === 'true') {
+            return false;
+        }
+        // ignore elements that aren't actually rendered (e.g. display:none)
+        return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
+    });
+};
+exports.getFocusableElements = getFocusableElements;
+function captureTab(node, event) {
+    if (event === undefined) {
+        return (deferredEvent) => captureTab(node, deferredEvent);
+    }
+    if (event.key !== 'Tab')
+        return;
+    const root = node instanceof HTMLElement ? node : (node?.current ?? null);
+    if (!root)
+        return;
+    const active = document.activeElement;
+    if (!active || !root.contains(active))
+        return;
+    const focusable = (0, exports.getFocusableElements)(root);
+    if (focusable.length === 0)
+        return;
+    const first = focusable[0];
+    const last = focusable[focusable.length - 1];
+    if (event.shiftKey) {
+        if (active === first) {
+            event.preventDefault();
+            last.focus();
+        }
+    }
+    else if (active === last) {
+        event.preventDefault();
+        first.focus();
+    }
+}