@adaptabletools/adaptable 22.0.10 → 22.1.0-canary.0

package/src/components/dnd/index.js

@@ -1,55 +1,4 @@
-import * as React from 'react';
-import { DragDropContext as DDContext, Draggable, Droppable as DNDDroppable, } from '@adaptabletools/react-beautiful-dnd';
-import { useState } from 'react';
-/**
- * We're doing all this because the placeholder is not correctly displayed in react-beautiful-dnd
- * with React 19.
- * So we make sure it properly occupies the space of the dragged item, so the
- * container won't flicker when we're dragging an item (as the drag item receives
- * position: fixed while dragging, so content does not have the initial height anymore, therefore,
- * the placeholder is included, with the computed height of the dragging element)
- */
-const Droppable = (props) => {
-    const children = props.children;
-    const { placeholderStyle } = React.useContext(AdaptableDDContext);
-    return (React.createElement(DNDDroppable, { ...props }, (provided, snapshot) => {
-        provided.placeholder = (React.createElement("div", { key: "placeholder", style: placeholderStyle || {
-                visibility: 'hidden',
-                pointerEvents: 'none',
-                height: 0,
-            } }));
-        return children(provided, snapshot);
-    }));
-};
-const queryAttr = 'data-rbd-draggable-id';
-const AdaptableDDContext = React.createContext({
-    placeholderStyle: null,
-});
-const DragDropContext = (props) => {
-    const getDraggedDom = (draggableId) => {
-        const domQuery = `[${queryAttr}='${draggableId}']`;
-        const draggedDOM = document.querySelector(domQuery);
-        return draggedDOM;
-    };
-    const [placeholderStyle, setPlaceholderStyle] = useState(null);
-    const handleDragStart = (initial, provided) => {
-        props.onDragStart?.(initial, provided);
-        const draggedDOM = getDraggedDom(initial.draggableId);
-        if (!draggedDOM) {
-            return;
-        }
-        const { clientHeight, clientWidth } = draggedDOM;
-        const computedStyle = window.getComputedStyle(draggedDOM);
-        setPlaceholderStyle({
-            height: clientHeight + parseFloat(computedStyle.marginTop) + parseFloat(computedStyle.marginBottom),
-            width: clientWidth,
-        });
-    };
-    const handleDragEnd = (result, provided) => {
-        props.onDragEnd?.(result, provided);
-        setPlaceholderStyle(null);
-    };
-    return (React.createElement(AdaptableDDContext.Provider, { value: { placeholderStyle } },
-        React.createElement(DDContext, { ...props, onDragStart: handleDragStart, onDragEnd: handleDragEnd })));
-};
-export { Draggable, Droppable, DragDropContext };
+export { DragDropProvider, DragList, useDragDropProvider, useDragListContext, DRAG_ITEM_ATTRIBUTE, } from '@infinite-table/infinite-react';
+export function defaultDragProxyMove({ proxyElement, dx, dy }) {
+    proxyElement.style.transform = `translate3d(${Math.round(dx)}px, ${Math.round(dy)}px, 0)`;
+}

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: 1775746119161 || Date.now(),
-    VERSION: "22.0.10" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1776278112836 || Date.now(),
+    VERSION: "22.1.0-canary.0" || '--current-version--',
 };

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

@@ -1,4 +1,4 @@
-import { ColumnSizingMap } from '../../AdaptableState/LayoutState';
+import { ColumnSizingMap, LayoutRowSelection } from '../../AdaptableState/LayoutState';
 import { XOR } from '../../Utilities/Extensions/TypeExtensions';
 /**
  * Defines how a Column is sorted
@@ -112,6 +112,7 @@ export interface BaseLayoutModel {
     ColumnPinning?: {
         [columnId: string]: 'left' | 'right';
     };
+    RowSelection?: LayoutRowSelection | false;
     /**
      * Display Grand Total Row of the Pivot Table
      */

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

@@ -1,6 +1,7 @@
 import { ColumnState, GridApi, GridOptions, GridState } from 'ag-grid-enterprise';
 import { PivotLayoutModel, TableLayoutModel } from './LayoutManagerModel';
 import { LMEmitter } from './LMEmitter';
+import { LayoutRowSelection } from '../../AdaptableState/LayoutState';
 export declare const PIVOT_ANY_TOTAL_COL_TYPE = "pivotAnyTotal";
 export declare const PIVOT_GRAND_TOTAL_COL_TYPE = "pivotGrandTotal";
 export declare const PIVOT_COLUMN_TOTAL_COL_TYPE = "pivotColumnTotal";
@@ -9,6 +10,7 @@ export type LayoutManagerOptions = {
     gridApi: GridApi;
     debugId: string;
     layoutChangeDebounce?: number;
+    initialRowSelection?: GridOptions['rowSelection'];
 };
 type ApplyLayoutOptions = {
     skipApplyRowGroupsExpandedState?: boolean;
@@ -26,6 +28,7 @@ export declare class LayoutManager<DATA_TYPE = any> extends LMEmitter {
     private suppressGlobalAgGridEventListener;
     private supressGlobalAgGridEventTimeoutId;
     private layoutManagerDebugId;
+    private initialRowSelection;
     constructor(options: LayoutManagerOptions);
     destroy(): void;
     private setupEvents;
@@ -69,6 +72,12 @@ export declare class LayoutManager<DATA_TYPE = any> extends LMEmitter {
     private getLayoutDetailsAsString;
     applyColumnDefsChanges(layout: TableLayoutModel | PivotLayoutModel): boolean;
     private applyColumnSizingColumnDefsChanges;
+    static readonly SELECTION_COLUMN_ID = "ag-Grid-SelectionColumn";
+    static getGridOptionForRowSelectionFromLayout(layoutRowSelection: LayoutRowSelection | false | undefined, baseGridRowSelection: GridOptions['rowSelection']): GridOptions['rowSelection'] | undefined;
+    static isSelectionColumnInNonFirstPosition(tableColumns: string[] | undefined): boolean;
+    private ensureSelectionColumnPositionUnlocked;
+    private getRowSelectionFromGrid;
+    private applyRowSelection;
     private applyTableLayout;
     private getRowGroupNodePathsAs;
     applyRowGroupValues(RowGroupValues: TableLayoutModel['RowGroupValues'], rowGroupedColumns: string[]): void;

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

@@ -151,6 +151,7 @@ export class LayoutManager extends LMEmitter {
     suppressGlobalAgGridEventListener = false;
     supressGlobalAgGridEventTimeoutId = null;
     layoutManagerDebugId;
+    initialRowSelection;
     constructor(options) {
         super({ debugId: options.debugId });
         this.layoutChangeDebounce = options.layoutChangeDebounce ?? 0;
@@ -159,6 +160,7 @@ export class LayoutManager extends LMEmitter {
                 wait: this.layoutChangeDebounce,
             }).bind(this);
         }
+        this.initialRowSelection = options.initialRowSelection;
         this.setOptions(options);
         // this ensures the grand total columns are positioned correctly (before/after) even when changed at runtime
         // see https://www.ag-grid.com/react-data-grid/pivoting-column-groups/#changing-data-filters-and-configurations
@@ -400,6 +402,7 @@ export class LayoutManager extends LMEmitter {
             PivotGroupedColumns: layout.RowGroupedColumns,
             PivotAggregationColumns: layout.TableAggregationColumns,
             GrandTotalRow: layout.GrandTotalRow,
+            RowSelection: layout.RowSelection,
             PivotExpandLevel: prevLayout?.PivotExpandLevel ?? -1,
         };
         if (storePivotResultColumns) {
@@ -431,7 +434,6 @@ export class LayoutManager extends LMEmitter {
     }
     getUndecidedLayoutModelFromGrid(columnState) {
         let TableColumns = columnState.map((c) => c.colId);
-        // .filter((colId) => colId !== 'ag-Grid-SelectionColumn');
         let ColumnSorts = [];
         const RowGroupedColumns = [];
         let RowGroupValues = undefined;
@@ -739,6 +741,7 @@ export class LayoutManager extends LMEmitter {
             GrandTotalRow: this.gridApi.getGridOption('grandTotalRow'),
             SuppressAggFuncInHeader: this.gridApi.getGridOption('suppressAggFuncInHeader'),
             RowGroupDisplayType: this.gridApi.getGridOption('groupDisplayType') === 'multipleColumns' ? 'multi' : 'single',
+            RowSelection: this.getRowSelectionFromGrid(),
         });
         return layout;
     }
@@ -813,6 +816,8 @@ export class LayoutManager extends LMEmitter {
         const flatColDefs = flattenColDefs(colDefs);
         const colDefsById = new Map(flatColDefs.map((colDef) => [colDef.colId ?? colDef.field, colDef]));
         const getColDef = (colId) => colDefsById.get(colId);
+        // TODO to implement support for row selection in server-side row model
+        // agGridState.rowSelection = { ... }
         agGridState.columnVisibility = {
             hiddenColIds: flatColDefs
                 .filter((colDef) => {
@@ -1101,6 +1106,7 @@ export class LayoutManager extends LMEmitter {
         else {
             this.gridApi.setGridOption('grandTotalRow', null);
         }
+        this.applyRowSelection(layout);
         this.applyColumnDefsChanges(layout);
         if (isPivotLayoutModel(layout)) {
             try {
@@ -1158,8 +1164,98 @@ export class LayoutManager extends LMEmitter {
         }
         return false;
     }
+    static SELECTION_COLUMN_ID = 'ag-Grid-SelectionColumn';
+    static getGridOptionForRowSelectionFromLayout(layoutRowSelection, baseGridRowSelection) {
+        if (layoutRowSelection === false) {
+            return undefined;
+        }
+        if (layoutRowSelection == null) {
+            return baseGridRowSelection;
+        }
+        const current = baseGridRowSelection && typeof baseGridRowSelection !== 'string'
+            ? baseGridRowSelection
+            : {};
+        const updated = { ...current };
+        if (layoutRowSelection.Mode != null) {
+            updated.mode = layoutRowSelection.Mode;
+        }
+        if (layoutRowSelection.Checkboxes != null) {
+            updated.checkboxes = layoutRowSelection.Checkboxes;
+        }
+        if (layoutRowSelection.GroupSelectMode != null) {
+            updated.groupSelects = layoutRowSelection.GroupSelectMode;
+        }
+        if (layoutRowSelection.SelectAllMode != null) {
+            updated.selectAll = layoutRowSelection.SelectAllMode;
+        }
+        if (layoutRowSelection.HeaderCheckbox != null) {
+            updated.headerCheckbox = layoutRowSelection.HeaderCheckbox;
+        }
+        if (layoutRowSelection.EnableClickSelection != null) {
+            updated.enableClickSelection = layoutRowSelection.EnableClickSelection;
+        }
+        if (layoutRowSelection.CheckboxInGroupColumn != null) {
+            updated.checkboxLocation = layoutRowSelection.CheckboxInGroupColumn
+                ? 'autoGroupColumn'
+                : 'selectionColumn';
+        }
+        return updated;
+    }
+    static isSelectionColumnInNonFirstPosition(tableColumns) {
+        if (!tableColumns) {
+            return false;
+        }
+        const index = tableColumns.indexOf(LayoutManager.SELECTION_COLUMN_ID);
+        return index > 0;
+    }
+    ensureSelectionColumnPositionUnlocked(layout) {
+        if (LayoutManager.isSelectionColumnInNonFirstPosition(layout.TableColumns)) {
+            const current = this.gridApi.getGridOption('selectionColumnDef');
+            if (!current || current.lockPosition !== false) {
+                this.gridApi.setGridOption('selectionColumnDef', {
+                    ...current,
+                    lockPosition: false,
+                });
+            }
+        }
+    }
+    getRowSelectionFromGrid() {
+        const gridRowSelection = this.gridApi.getGridOption('rowSelection');
+        if (!gridRowSelection || typeof gridRowSelection === 'string') {
+            return this.currentLayout?.RowSelection === false ? false : undefined;
+        }
+        const rs = gridRowSelection;
+        const result = {
+            Mode: rs.mode ?? 'singleRow',
+        };
+        if (rs.checkboxes != null) {
+            result.Checkboxes = rs.checkboxes;
+        }
+        if (rs.mode === 'multiRow' && rs.groupSelects != null) {
+            result.GroupSelectMode = rs.groupSelects;
+        }
+        if (rs.mode === 'multiRow' && rs.selectAll != null) {
+            result.SelectAllMode = rs.selectAll;
+        }
+        if (rs.mode === 'multiRow' && rs.headerCheckbox != null) {
+            result.HeaderCheckbox = rs.headerCheckbox;
+        }
+        if (rs.enableClickSelection != null) {
+            result.EnableClickSelection =
+                rs.enableClickSelection;
+        }
+        if (rs.checkboxLocation != null) {
+            result.CheckboxInGroupColumn = rs.checkboxLocation === 'autoGroupColumn';
+        }
+        return result;
+    }
+    applyRowSelection(layout) {
+        const rowSelection = LayoutManager.getGridOptionForRowSelectionFromLayout(layout.RowSelection, this.initialRowSelection);
+        this.gridApi.setGridOption('rowSelection', rowSelection);
+    }
     applyTableLayout(layout, options) {
         this.withSuppressColumnAnimation(() => {
+            this.ensureSelectionColumnPositionUnlocked(layout);
             // if we apply the state here, before calling setGridOption for groupDisplayType
             // the order is not always correctly applied
             // this.gridApi.applyColumnState(state);

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

@@ -35,6 +35,10 @@ export function normalizeTableLayoutModel(layout, options) {
         // make it an own property
         layout.GrandTotalRow = undefined;
     }
+    if (!('RowSelection' in layout)) {
+        // make it an own property
+        layout.RowSelection = undefined;
+    }
     const ColumnOrderSet = new Set(layout.TableColumns);
     if (layout.RowGroupedColumns && layout.RowGroupedColumns.length && layout.TableColumns) {
         // the layout.TableColumns might not include the group columns
@@ -168,6 +172,10 @@ export function normalizePivotLayoutModel(layout) {
         // make it an own property
         layout.PivotColumnTotal = undefined;
     }
+    if (!('RowSelection' in layout)) {
+        // make it an own property
+        layout.RowSelection = undefined;
+    }
     // if (layout.PivotGroupedColumns && layout.PivotGroupedColumns.length) {
     layout.RowGroupDisplayType = layout.RowGroupDisplayType || 'single';
     // }

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

@@ -8,6 +8,9 @@ export function simplifyTableLayoutModel(layout) {
     if (layout.ColumnSizing && !Object.keys(layout.ColumnSizing).length) {
         delete layout.ColumnSizing;
     }
+    if (layout.RowSelection == undefined) {
+        delete layout.RowSelection;
+    }
     if (layout.ColumnSorts && !layout.ColumnSorts.length) {
         delete layout.ColumnSorts;
     }
@@ -72,6 +75,9 @@ export function simplifyPivotLayoutModel(layout) {
     if (layout.ColumnSizing && !Object.keys(layout.ColumnSizing).length) {
         delete layout.ColumnSizing;
     }
+    if (layout.RowSelection == undefined) {
+        delete layout.RowSelection;
+    }
     if (!layout.SuppressAggFuncInHeader) {
         delete layout.SuppressAggFuncInHeader;
     }

package/src/metamodel/adaptable-metamodel-model.d.ts

@@ -1,19 +1,28 @@
 export type AdaptableMetamodel = Record<string, MetamodelItem>;
 export interface MetamodelItem {
-    name: string;
-    kind: 'A' | 'I' | 'C';
-    desc: string;
-    props?: MetamodelItemProperty[];
+    /** Item kind: 'A' (type alias), 'I' (interface), 'C' (class) */
+    k: 'A' | 'I' | 'C';
+    /** Description (only present for noCode-tagged items) */
+    d?: string;
+    /** Properties of this item */
+    p?: MetamodelItemProperty[];
 }
 export interface MetamodelItemProperty {
-    name: string;
-    kind: MetamodelItemPropertyKind;
-    desc: string;
-    uiLabel?: string;
-    ref?: string;
-    isOpt?: boolean;
-    defVal?: unknown;
-    gridInfo?: 'item' | 'container';
-    noCode?: 'item' | 'container';
+    /** Property name */
+    n: string;
+    /** Property kind / type */
+    k: MetamodelItemPropertyKind;
+    /** Description (only present for noCode-tagged properties) */
+    d?: string;
+    /** UI label override for display */
+    l?: string;
+    /** Reference to another MetamodelItem key */
+    r?: string;
+    /** Whether the property is optional */
+    o?: boolean;
+    /** Grid Info role: 'item' or 'container' */
+    g?: 'item' | 'container';
+    /** No-Code role: 'item' or 'container' */
+    nC?: 'item' | 'container';
 }
 export type MetamodelItemPropertyKind = 'R' | 'n' | 's' | 'b' | 'd' | 'f' | 'a' | 'i' | 'u';