@adaptabletools/adaptable 22.0.11 → 22.1.0-canary.1

package/src/View/Components/ReorderDraggable/index.js

@@ -1,43 +1,29 @@
 import * as React from 'react';
-import { DragDropContext, Draggable, Droppable } from '../../../components/dnd';
+import { defaultDragProxyMove, DragDropProvider, DragList } from '../../../components/dnd';
 import { Icon } from '../../../components/icons';
-import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
 import { Box, Flex } from '../../../components/Flex';
 import clsx from 'clsx';
-import { twMerge } from '../../../twMerge';
 export function ReorderDraggable(props) {
-    const { onChange, order, toIdentifier, isOptionDraggable, disabled, } = props;
+    const { onChange, order, toIdentifier, isOptionDraggable, disabled } = props;
     const baseClassName = 'ab-ReorderDraggable';
-    const renderOption = (option, index) => {
-        const identifier = toIdentifier(option);
-        const renderNode = (flexProps, dragHandleProps) => {
-            const reorderable = isOptionDraggable ? isOptionDraggable(option) : true;
-            return (React.createElement(Flex, { alignItems: "center", key: identifier ?? index, "data-index": index, "data-id": identifier, "data-name": "option", ...flexProps, className: clsx(`${baseClassName}__option ${index ? 'twa:mt-1' : 'twa:mt-0'} twa:bg-primary twa:p-2 ${flexProps?.className || ''}`, props.optionClassName?.(option)), onClick: (e) => props.onOptionClick?.(option, e) },
-                React.createElement(Flex, { className: "twa:flex-1", flexDirection: "row", alignItems: "center" },
-                    reorderable ? (React.createElement(Box, { ...dragHandleProps, className: `twa:mr-3 ${dragHandleProps?.className || ''}` },
-                        React.createElement(Icon, { name: "drag", style: { cursor: 'grab' } }))) : (React.createElement(Box, { className: "twa:mr-3" },
-                        React.createElement(Icon, { name: "drag", style: { cursor: 'not-allowed', opacity: 0.3 } }))),
-                    props.renderOption(option, index))));
-        };
-        const reorderable = isOptionDraggable ? isOptionDraggable(option) : true;
-        return (React.createElement(Draggable, { key: identifier, index: index, draggableId: `${identifier}`, isDragDisabled: !reorderable || disabled }, (draggableProvided) => {
-            return renderNode({
-                ref: draggableProvided.innerRef,
-                ...draggableProvided.draggableProps,
-                style: draggableProvided.draggableProps.style,
-            }, draggableProvided.dragHandleProps);
-        }));
-    };
-    return (React.createElement(Flex, { style: props.style, className: twMerge(`${baseClassName} twa:flex-1`, props.className), flexDirection: "column" },
-        React.createElement(DragDropContext, { onDragEnd: (result) => {
-                const { source, destination } = result;
-                const newOrder = ArrayExtensions.reorderArray(props.order, source.index, destination.index);
-                onChange(newOrder);
-            } },
-            React.createElement(Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-auto`, flexDirection: "column" },
-                React.createElement(Droppable, { droppableId: "droppable" }, (droppableProvided) => {
-                    return (React.createElement("div", { ref: droppableProvided.innerRef, ...droppableProvided.droppableProps },
-                        order.map(renderOption),
-                        droppableProvided.placeholder));
-                })))));
+    return (React.createElement(Flex, { style: props.style, className: `${baseClassName} twa:flex-1`, flexDirection: "column" },
+        React.createElement(DragDropProvider, null,
+            React.createElement(Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-y-auto twa:overflow-x-hidden`, flexDirection: "column" },
+                React.createElement(DragList, { dragListId: "reorder-draggable", orientation: "vertical", dragStrategy: "proxy", preserveDragSpace: true, onDragProxyMove: defaultDragProxyMove, onDragProxySetup: ({ proxyElement }) => {
+                        proxyElement.classList.add('twa:shadow-md');
+                    }, onDrop: (sortedIndexes) => {
+                        onChange(sortedIndexes.map((i) => order[i]));
+                    } }, (listDomProps) => (React.createElement("div", { ...listDomProps }, order.map((option, index) => {
+                    const identifier = toIdentifier(option);
+                    const reorderable = isOptionDraggable ? isOptionDraggable(option) : true;
+                    return (React.createElement(DragList.DraggableItem, { key: identifier, id: `${identifier}` }, (itemDomProps, itemContext) => {
+                        const { onPointerDown, ...restDomProps } = itemDomProps;
+                        return (React.createElement(Flex, { alignItems: "center", "data-index": index, "data-id": identifier, "data-name": "option", ...restDomProps, className: clsx(`${baseClassName}__option`, index ? 'twa:mt-1' : 'twa:mt-0', 'twa:bg-primary twa:p-2', itemContext.active ? 'twa:shadow-md' : '', restDomProps.className, props.optionClassName?.(option)), onClick: (e) => props.onOptionClick?.(option, e) },
+                            React.createElement(Flex, { className: "twa:flex-1", flexDirection: "row", alignItems: "center" },
+                                reorderable && !disabled ? (React.createElement(Box, { onPointerDown: onPointerDown, className: "twa:mr-3" },
+                                    React.createElement(Icon, { name: "drag", style: { cursor: 'grab' } }))) : (React.createElement(Box, { className: "twa:mr-3" },
+                                    React.createElement(Icon, { name: "drag", style: { cursor: 'not-allowed', opacity: 0.3 } }))),
+                                props.renderOption(option, index))));
+                    }));
+                }))))))));
 }

package/src/View/Components/ValueSelector/index.js

@@ -1,11 +1,10 @@
 import * as React from 'react';
 import { useState, useMemo, useCallback } from 'react';
-import { DragDropContext, Draggable, Droppable } from '../../../components/dnd';
+import { defaultDragProxyMove, DragDropProvider, DragList } from '../../../components/dnd';
 import { CheckBox } from '../../../components/CheckBox';
 import { Icon } from '../../../components/icons';
 import Radio from '../../../components/Radio';
 import { AdaptableFormControlTextClear } from '../Forms/AdaptableFormControlTextClear';
-import ArrayExtensions from '../../../Utilities/Extensions/ArrayExtensions';
 import { Box, Flex } from '../../../components/Flex';
 import clsx from 'clsx';
 function useValuesMap({ options, value, toIdentifier, selectedMap, }) {
@@ -57,13 +56,14 @@ export function ValueSelector(props) {
         const identifier = toIdentifier(option);
         const label = !allowReorder ? preparedToLabel(option) : null;
         const reorderable = typeof allowReorder === 'function' ? allowReorder(option) : allowReorder;
-        const renderNode = (props, dragHandleProps) => {
-            return (React.createElement(Flex, { alignItems: "center", key: identifier ?? index, "data-index": index, "data-id": identifier, "data-name": "option", ...props, className: clsx(`twa:bg-primary twa:text-text-on-primary twa:rounded-standard twa:p-2`, {
+        return (React.createElement(DragList.DraggableItem, { key: identifier, id: `${identifier}` }, (itemDomProps) => {
+            const { onPointerDown, ...restDomProps } = itemDomProps;
+            return (React.createElement(Flex, { alignItems: "center", "data-index": index, "data-id": identifier, "data-name": "option", ...restDomProps, className: clsx('twa:bg-primary twa:text-text-on-primary twa:rounded-standard twa:p-2', {
                     'twa:mt-1': index,
                     'twa:mt-0': !index,
-                }, props.className, `${baseClassName}__option`) },
+                }, restDomProps.className, `${baseClassName}__option`) },
                 React.createElement(Flex, { flexDirection: "row", alignItems: "center", className: "twa:flex-1" },
-                    reorderable ? (React.createElement(Box, { ...dragHandleProps, className: clsx('twa:mr-3', dragHandleProps?.className) },
+                    reorderable ? (React.createElement(Box, { onPointerDown: onPointerDown, className: "twa:mr-3" },
                         React.createElement(Icon, { name: "drag", style: { cursor: 'grab' } }))) : null,
                     singleSelect ? (React.createElement(Radio, { checked: selectedMap.has(identifier), "data-name": identifier, onChange: (checked) => {
                             if (checked) {
@@ -84,13 +84,6 @@ export function ValueSelector(props) {
                             notifyChange();
                         }, checked: selectedMap.has(identifier) }, label)),
                     React.createElement(Box, { className: "twa:ml-2 twa:flex-1" }, allowReorder ? preparedToLabel(option) : null))));
-        };
-        return (React.createElement(Draggable, { key: identifier, index: index, draggableId: `${identifier}`, isDragDisabled: !reorderable }, (draggableProvided) => {
-            return renderNode({
-                ref: draggableProvided.innerRef,
-                ...draggableProvided.draggableProps,
-                style: draggableProvided.draggableProps.style,
-            }, draggableProvided.dragHandleProps);
         }));
     };
     const showOnlySelectedCheckbox = (React.createElement(CheckBox, { disabled: !value.length, checked: selectedOnly, onChange: setSelectedOnly }, showSelectedOnlyLabel ?? 'Show Selected Only'));
@@ -115,45 +108,48 @@ export function ValueSelector(props) {
     return (React.createElement(Flex, { style: props.style, className: clsx('twa:flex-1', baseClassName), flexDirection: "column" },
         React.createElement(Flex, { className: "twa:mb-1" }, showFilterInput && filter ? (React.createElement(AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", className: "twa:flex-1 twa:border-0 twa:m-[3px]" })) : (React.createElement(Box, { className: "twa:flex-1" }))),
         renderSelectionSection(selectionSectionProps),
-        React.createElement(DragDropContext, { onDragEnd: (result) => {
-                const { source, destination } = result;
-                const selection = [];
-                const extraKeys = [];
-                for (let [key, value] of selectedMap) {
-                    if (value != null) {
-                        selection.push(key);
-                    }
-                    else {
-                        // null/non-existent keys have to be stored separately
-                        extraKeys.push(key);
-                    }
-                }
-                const clone = new Map(selectedMap);
-                const newSelection = ArrayExtensions.reorderArray(selection, source.index, destination.index);
-                // and then pushed back in the new order, at the end
-                newSelection.push(...extraKeys);
-                selectedMap.clear();
-                newSelection.forEach((key) => {
-                    selectedMap.set(key, clone.get(key));
-                });
-                notifyChange();
-            } },
+        React.createElement(DragDropProvider, null,
             React.createElement(Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-auto`, flexDirection: "column" },
-                React.createElement(Droppable, { droppableId: "droppable" }, (droppableProvided) => {
-                    return (React.createElement("div", { ref: droppableProvided.innerRef, ...droppableProvided.droppableProps },
-                        options
-                            .filter((option) => {
-                            let result = true;
-                            if (filter) {
-                                result = filter(option, searchInputValue);
+                React.createElement(DragList, { dragListId: "value-selector", orientation: "vertical", onDragProxyMove: defaultDragProxyMove, onDragProxySetup: ({ proxyElement }) => {
+                        proxyElement.classList.add('twa:shadow-md');
+                    }, onDrop: (_sortedIndexes) => {
+                        const selection = [];
+                        const extraKeys = [];
+                        for (const [key, value] of selectedMap) {
+                            if (value != null) {
+                                selection.push(key);
                             }
-                            result =
-                                result && (selectedOnly ? selectedMap.has(toIdentifier(option)) : true);
-                            return result;
-                        })
-                            .map(renderOption),
-                        droppableProvided.placeholder));
-                })))));
+                            else {
+                                // null/non-existent keys have to be stored separately
+                                extraKeys.push(key);
+                            }
+                        }
+                        const clone = new Map(selectedMap);
+                        // const newSelection: ID_TYPE[] = ArrayExtensions.reorderArray(
+                        //   selection,
+                        //   dragIndex,
+                        //   dropIndex
+                        // );
+                        const newSelection = _sortedIndexes
+                            .map((index) => selection[index])
+                            .filter((x) => x != null);
+                        newSelection.push(...extraKeys);
+                        selectedMap.clear();
+                        newSelection.forEach((key) => {
+                            selectedMap.set(key, clone.get(key));
+                        });
+                        notifyChange();
+                    } }, (listDomProps) => (React.createElement("div", { ...listDomProps }, options
+                    .filter((option) => {
+                    let result = true;
+                    if (filter) {
+                        result = filter(option, searchInputValue);
+                    }
+                    result =
+                        result && (selectedOnly ? selectedMap.has(toIdentifier(option)) : true);
+                    return result;
+                })
+                    .map(renderOption))))))));
 }
 export const renderSelectionSection = (props) => {
     const { value, options, disabled, singleSelect, toLabel, toIdentifier, } = props;

package/src/View/Dashboard/PinnedToolbarsSelector.js

@@ -37,5 +37,5 @@ export const PinnedToolbarsSelector = (props) => {
             editTabName: false,
         }, onTabsChange: (tabs) => {
             dispatch(DashboardSetPinnedToolbars(tabs[0].Items));
-        }, disabled: isDashboardDisabled, tabs: tabs, availableItems: toolbars, tabsTitle: 'Pinned Toolbars', unusedPanelTitle: "Available Pinned Toolbars", dragItemText: "Drag into the Panel below" }));
+        }, disabled: isDashboardDisabled, tabs: tabs, availableItems: toolbars, filterOutSelectedItems: true, tabsTitle: 'Pinned Toolbars', unusedPanelTitle: "Available Pinned Toolbars", dragItemText: "Drag into the Panel below" }));
 };

package/src/View/Layout/Wizard/LayoutWizard.js

@@ -13,6 +13,7 @@ import { SortSection, SortSectionSummary } from './sections/SortSection';
 import { FilterSection, FilterSectionSummary, isColumnFiltersValid, } from './sections/FilterSection';
 import { GridFilterSection, GridFilterSectionSummary, isGridFiltersValid, } from './sections/GridFilterSection';
 import { areSummaryRowsValid, RowSummarySection, RowSummarySectionSummary, } from './sections/RowSummarySection';
+import { RowSelectionSection, RowSelectionSectionSummary } from './sections/RowSelectionSection';
 import { WEIGHTED_AVERAGE_AGGREGATED_FUNCTION } from '../../../AdaptableState/Common/RowSummary';
 import { isPivotLayout } from '../../../Utilities/isPivotLayout';
 import { PivotRowGroupingSection, PivotRowGroupingSectionSummary, } from './sections/PivotRowGroupingSection';
@@ -114,7 +115,7 @@ export const LayoutWizard = (props) => {
                 isValid: (data) => isPivotAggregationsSectionValid(data),
                 render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(PivotAggregationsSection, { onChange: (layout) => {
-                            let newLayout = cloneObject(layout);
+                            const newLayout = cloneObject(layout);
                             setLayout(newLayout);
                         } }))),
             },
@@ -144,6 +145,13 @@ export const LayoutWizard = (props) => {
                 render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(GridFilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
+            {
+                title: 'Row Selection',
+                details: 'Configure Row Selection',
+                renderSummary: () => React.createElement(RowSelectionSectionSummary, null),
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
+                    React.createElement(RowSelectionSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+            },
             '-',
             {
                 details: 'Review your Pivot Layout',
@@ -257,6 +265,13 @@ export const LayoutWizard = (props) => {
                 render: () => (React.createElement(Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(GridFilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
+            {
+                title: 'Row Selection',
+                details: 'Configure Row Selection',
+                renderSummary: () => React.createElement(RowSelectionSectionSummary, null),
+                render: () => (React.createElement(Box, { className: "twa:p-2" },
+                    React.createElement(RowSelectionSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+            },
             '-',
             {
                 details: 'Review your Table Layout',

package/src/View/Layout/Wizard/sections/ColumnsSection.js

@@ -10,7 +10,7 @@ import { Icon, NaturallySizedIcon } from '../../../../components/icons';
 import { CheckBox } from '../../../../components/CheckBox';
 import { clamp } from '../../../../Utilities/Helpers/Helper';
 import ArrayExtensions from '../../../../Utilities/Extensions/ArrayExtensions';
-import { generateAutoRowGroupColumnForColumn, generateAutoRowGroupSingleColumn, generateAutoTreeSingleColumn, isAutoRowGroupColumn, } from '../../../../Api/Implementation/ColumnApiImpl';
+import { generateAutoRowGroupColumnForColumn, generateAutoRowGroupSingleColumn, generateAutoTreeSingleColumn, generateSelectionColumn, isAutoRowGroupColumn, } from '../../../../Api/Implementation/ColumnApiImpl';
 import { ReorderDraggable } from '../../../Components/ReorderDraggable';
 import { AdaptableFormControlTextClear } from '../../../Components/Forms/AdaptableFormControlTextClear';
 import { sortColumnIdsByOrder } from '../../../../layout-manager/src/sortColumnIdsByOrder';
@@ -132,26 +132,29 @@ export const ColumnsSectionSummary = () => {
     return (React.createElement(DataSource, { data: data, primaryKey: "columnId" },
         React.createElement(InfiniteTableGrid, { columnTypes: columnTypes, rowHeight: rowHeight, columnHeaderHeight: headerHeight, domProps: tableDOMProps, columns: columns })));
 };
+const isSelectionColumn = (columnId) => columnId === AG_GRID_SELECTION_COLUMN;
 const isColumnVisible = (options) => {
     const { columnId, layout } = options;
     const isRowGroupColumn = isAutoRowGroupColumn(columnId);
     const visible = (!isPivotLayout(layout) &&
         layout.TableColumns.includes(columnId) &&
         layout.ColumnVisibility?.[columnId] !== false) ||
-        isRowGroupColumn;
+        isRowGroupColumn ||
+        isSelectionColumn(columnId);
     return visible;
 };
 const ColumnRow = (props) => {
     const adaptable = useAdaptable();
     const initialHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(props.column.columnId, props.layout);
     const isRowGroupColumn = isAutoRowGroupColumn(props.column.columnId);
+    const isSelectionCol = isSelectionColumn(props.column.columnId);
     const { column } = props;
     const visible = isColumnVisible({ columnId: column.columnId, layout: props.layout });
     return (React.createElement(Box, { "data-name": props.column.columnId, className: "twa:flex-1" },
         React.createElement(Flex, { className: "ab-Layout-Wizard__ColumnRow__Header twa:my-1" },
             React.createElement(CheckBox, { "data-name": column.columnId, onChange: (checked) => {
                     props.onColumnVisibilityChange(column.columnId, checked);
-                }, disabled: column.hideable === false || isRowGroupColumn, onClick: (event) => {
+                }, disabled: column.hideable === false || isRowGroupColumn || isSelectionCol, onClick: (event) => {
                     event.stopPropagation();
                 }, checked: visible }),
             React.createElement(Flex, { className: "twa:mx-2", alignItems: "center", "data-name": "column-label" }, initialHeader),
@@ -164,7 +167,12 @@ export const ColumnsSection = (props) => {
     const { data: layout } = useOnePageAdaptableWizardContext();
     const [searchInputValue, setSearchInputValue] = React.useState('');
     const [selectedColumnId, setSelectedColumnId] = React.useState(null);
-    let hasSelectionColumn = false;
+    // the selection column is a special column managed by AG Grid - it is not
+    // returned by `getUIAvailableColumns`, but we still want to expose it in the
+    // column list (similar to auto row group columns) so users can reorder/pin it
+    const hasSelectionColumn = adaptable.api.columnApi
+        .getColumns()
+        .some((col) => col.isGeneratedSelectionColumn);
     const allColumns = adaptable.api.columnApi
         .getUIAvailableColumns()
         .filter((col) => {
@@ -175,14 +183,9 @@ export const ColumnsSection = (props) => {
     })
         // if the current Layout is a PivotLayout, then we also filter out current Pivot Result Columns
         .filter((col) => !col.isGeneratedPivotResultColumn)
-        // also we need to filter out selection column
-        .filter((col) => {
-        const result = !col.isGeneratedSelectionColumn;
-        if (!result) {
-            hasSelectionColumn = true;
-        }
-        return result;
-    });
+        // selection columns are not returned by `getUIAvailableColumns` but guard
+        // against any future change
+        .filter((col) => !col.isGeneratedSelectionColumn);
     const onChange = (data) => {
         if (hasSelectionColumn &&
             Array.isArray(data.TableColumns) &&
@@ -209,13 +212,22 @@ export const ColumnsSection = (props) => {
         !allColumns.find((col) => col.columnId === AG_GRID_GROUPED_COLUMN)) {
         allColumns.unshift(generateAutoTreeSingleColumn());
     }
+    if (hasSelectionColumn) {
+        allColumns.unshift(generateSelectionColumn());
+    }
     const colIdToCol = allColumns.reduce((acc, col) => {
         if (col) {
             acc[col.columnId] = col;
         }
         return acc;
     }, {});
-    const TableColumns = layout.TableColumns;
+    let TableColumns = layout.TableColumns;
+    // when the selection column exists but is not explicitly listed in
+    // TableColumns, `sortArrayWithOrder` would push it to the end - instead we
+    // want it at the start (consistent with AG Grid's default position for it)
+    if (hasSelectionColumn && !TableColumns.includes(AG_GRID_SELECTION_COLUMN)) {
+        TableColumns = [AG_GRID_SELECTION_COLUMN, ...TableColumns];
+    }
     const ColumnOrderAllColumns = ArrayExtensions.sortArrayWithOrder(allColumns.map((col) => col.columnId), TableColumns, { sortUnorderedItems: false }).map((colId) => colIdToCol[colId]);
     const currentOrder = searchInputValue
         ? ColumnOrderAllColumns.filter((col) => {
@@ -259,7 +271,7 @@ export const ColumnsSection = (props) => {
         const columnIdArray = Array.isArray(columnId) ? columnId : [columnId];
         const columnIdSet = new Set(columnIdArray);
         const ColumnVisibility = { ...layout.ColumnVisibility };
-        let TableColumns = [...layout.TableColumns];
+        let newTableColumns = [...TableColumns];
         if (visible) {
             columnIdArray.forEach((colId) => {
                 delete ColumnVisibility[colId];
@@ -272,11 +284,11 @@ export const ColumnsSection = (props) => {
         }
         const columnIds = ColumnOrderAllColumns.map((col) => col.columnId);
         const idsToIndexes = new Map(columnIds.map((colId, index) => [colId, index]));
-        const columnOrderSet = new Set(TableColumns);
+        const columnOrderSet = new Set(newTableColumns);
         const currentColumnIdsAreIncluded = columnIdArray.every((colId) => columnOrderSet.has(colId));
         if (!currentColumnIdsAreIncluded) {
             const biggestIndex = Math.max(...columnIdArray.map((colId) => idsToIndexes.get(colId)));
-            TableColumns = columnIds.filter((colId) => {
+            newTableColumns = columnIds.filter((colId) => {
                 const isCurrent = columnOrderSet.has(colId);
                 if (isCurrent) {
                     return true;
@@ -298,7 +310,7 @@ export const ColumnsSection = (props) => {
         }
         onChange({
             ...layout,
-            TableColumns: TableColumns,
+            TableColumns: newTableColumns,
             ColumnVisibility,
         });
     };
@@ -452,7 +464,7 @@ export const ColumnsSection = (props) => {
                                 return (React.createElement(ColumnRow, { onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange, onPinChange: handlePinChange, layout: layout, column: option }));
                             }, onChange: handleColumnsChange }))),
                 currentOrderIds.length ? (React.createElement(ColumnPropertiesEditor, { column: selectedColumnId && currentOrderIds.includes(selectedColumnId)
-                        ? (colIdToCol[selectedColumnId] ?? null)
+                        ? colIdToCol[selectedColumnId] ?? null
                         : null, layout: layout, onPinChange: handlePinChange, onColumnNameChange: handleColumnNameChange, onColumnWidthChange: handleColumnWidthChange, onColumnFlexChange: handleColumnFlexChange, onColumnMinWidthChange: handleColumnMinWidthChange, onColumnMaxWidthChange: handleColumnMaxWidthChange, onColumnVisibilityChange: handleColumnVisibilityChange })) : null))));
 };
 const hr = (React.createElement("hr", { className: "twa:my-3 twa:mb-0 twa:w-full twa:h-[0.5px] twa:bg-inputborder/50 twa:border-none" }));
@@ -494,7 +506,7 @@ const ColumnPropertiesEditor = (props) => {
             React.createElement(Flex, { flexDirection: "column", className: "twa:gap-3 twa:mt-3" },
                 React.createElement(Flex, { flexDirection: "column", className: "twa:gap-1" },
                     "Header",
-                    React.createElement(Input, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input twa:w-full", placeholder: "Custom name (optional)", onChange: () => {
+                    React.createElement(Input, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input twa:w-full", placeholder: "Custom name (optional)", disabled: props.column.isGeneratedSelectionColumn, onChange: () => {
                             props.onColumnNameChange(props.column.columnId, event.target.value);
                         }, value: customHeader })),
                 React.createElement(Box, { className: "twa:grid twa:grid-cols-[1fr_1fr] twa:gap-2" },

package/src/View/Layout/Wizard/sections/RowGroupingSection.js

@@ -91,7 +91,7 @@ export const RowGroupingSection = (props) => {
                             onChange(newLayout);
                         } },
                         React.createElement(TypeRadio, { value: "single", text: "Single Column", description: "All Row Grouped Columns display in one hierarchical Column" }),
-                        React.createElement(TypeRadio, { value: "multi", text: "Multiple Columns", description: "Each Row Grouped Columns displays in its own, separate, Column" }))))),
+                        React.createElement(TypeRadio, { value: "multi", text: "Multiple Columns", description: "Each Row Grouped Column displays in its own, separate, Column" }))))),
         React.createElement(Tabs, { className: "twa:mt-2" },
             React.createElement(Tabs.Tab, null, "Row Grouped Columns"),
             React.createElement(Tabs.Tab, null, rowGroupsText),

package/src/View/Layout/Wizard/sections/RowSelectionSection.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { Layout } from '../../../../../types';
+export declare const RowSelectionSectionSummary: React.FunctionComponent;
+interface RowSelectionSectionProps {
+    onChange: (data: Layout) => void;
+}
+export declare const RowSelectionSection: React.FunctionComponent<RowSelectionSectionProps>;
+export {};

package/src/View/Layout/Wizard/sections/RowSelectionSection.js

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import { CheckBox } from '../../../../components/CheckBox';
+import Radio, { radioGroupStyling } from '../../../../components/Radio';
+import { RadioGroup } from '../../../../components/Radio';
+import { Tabs } from '../../../../components/Tabs';
+import { Tag } from '../../../../components/Tag';
+import { useOnePageAdaptableWizardContext } from '../../../Wizard/OnePageAdaptableWizard';
+import { Box, Flex } from '../../../../components/Flex';
+import { twMerge } from '../../../../twMerge';
+import HelpBlock from '../../../../components/HelpBlock';
+import { isPivotLayout } from '../../../../Utilities/isPivotLayout';
+import { AG_GRID_SELECTION_COLUMN } from '../../../../Utilities/Constants/GeneralConstants';
+export const RowSelectionSectionSummary = () => {
+    const { data: layout } = useOnePageAdaptableWizardContext();
+    if (layout.RowSelection === false) {
+        return (React.createElement(Box, null,
+            React.createElement(Tag, null, "Row Selection Disabled")));
+    }
+    if (!layout.RowSelection) {
+        return (React.createElement(Box, null,
+            React.createElement(Tag, null, "Default (from Grid Options)")));
+    }
+    const rs = layout.RowSelection;
+    return (React.createElement(Box, null,
+        React.createElement(Tag, { className: "twa:mr-2" },
+            "Mode: ",
+            rs.Mode === 'multiRow' ? 'Multi Row' : 'Single Row'),
+        rs.Checkboxes != null && (React.createElement(Tag, { className: "twa:mr-2" },
+            "Checkboxes: ",
+            rs.Checkboxes ? 'Yes' : 'No')),
+        rs.HeaderCheckbox != null && (React.createElement(Tag, { className: "twa:mr-2" },
+            "Header Checkbox: ",
+            rs.HeaderCheckbox ? 'Yes' : 'No')),
+        rs.EnableClickSelection != null && (React.createElement(Tag, { className: "twa:mr-2" },
+            "Click Selection: ",
+            String(rs.EnableClickSelection))),
+        rs.CheckboxInGroupColumn != null && (React.createElement(Tag, { className: "twa:mr-2" },
+            "Checkbox Location: ",
+            rs.CheckboxInGroupColumn ? 'Group Column' : 'Selection Column')),
+        rs.GroupSelectMode != null && (React.createElement(Tag, { className: "twa:mr-2" },
+            "Group Select Mode: ",
+            rs.GroupSelectMode)),
+        rs.SelectAllMode != null && (React.createElement(Tag, { className: "twa:mr-2" },
+            "Select All Mode: ",
+            rs.SelectAllMode))));
+};
+function getMode(layout) {
+    if (!layout.RowSelection) {
+        return false;
+    }
+    return layout.RowSelection.Mode;
+}
+export const RowSelectionSection = (props) => {
+    const { data: layout } = useOnePageAdaptableWizardContext();
+    const mode = getMode(layout);
+    const isPivot = isPivotLayout(layout);
+    const rowSelection = layout.RowSelection ?? false;
+    const handleModeChange = (newMode) => {
+        if (newMode === false) {
+            props.onChange({ ...layout, RowSelection: false });
+            return;
+        }
+        const base = rowSelection
+            ? { ...rowSelection, Mode: newMode }
+            : { Mode: newMode };
+        if (newMode === 'singleRow') {
+            delete base.HeaderCheckbox;
+            delete base.GroupSelectMode;
+            delete base.SelectAllMode;
+        }
+        props.onChange({ ...layout, RowSelection: base });
+    };
+    const updateRowSelection = (patch) => {
+        if (!rowSelection) {
+            return;
+        }
+        const newLayout = {
+            ...layout,
+            RowSelection: { ...rowSelection, ...patch },
+        };
+        if (newLayout.RowSelection && !newLayout.RowSelection.CheckboxInGroupColumn) {
+            if (newLayout.TableColumns) {
+                if (!newLayout.TableColumns.includes(AG_GRID_SELECTION_COLUMN)) {
+                    newLayout.TableColumns = [AG_GRID_SELECTION_COLUMN, ...(newLayout.TableColumns ?? [])];
+                }
+            }
+            else if (newLayout.PivotColumns) {
+                if (!newLayout.PivotColumns.includes(AG_GRID_SELECTION_COLUMN)) {
+                    newLayout.PivotColumns = [AG_GRID_SELECTION_COLUMN, ...(newLayout.PivotColumns ?? [])];
+                }
+            }
+        }
+        props.onChange(newLayout);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Tabs, null,
+            React.createElement(Tabs.Tab, null, "Row Selection Mode"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(Flex, { flexDirection: "column" },
+                    React.createElement(RadioGroup, { orientation: "horizontal", variant: "text-only", className: twMerge(radioGroupStyling.horizontalTextOnly, 'twa:gap-2 twa:max-w-[500px] twa:bg-defaultbackground twa:p-2'), value: mode, name: "rowSelectionMode", onRadioChange: handleModeChange },
+                        React.createElement(Radio, { value: false }, "Disabled"),
+                        React.createElement(Radio, { value: "singleRow" }, "Single Row"),
+                        React.createElement(Radio, { value: "multiRow" }, "Multi Row"))))),
+        !rowSelection && React.createElement(HelpBlock, null, "There is no Row Selection configured for this Layout"),
+        rowSelection && (React.createElement(React.Fragment, null,
+            React.createElement(Tabs, { className: "twa:mt-2" },
+                React.createElement(Tabs.Tab, null, "Row Selection Column"),
+                React.createElement(Tabs.Content, null,
+                    React.createElement(Flex, { flexDirection: "row", className: "twa:gap-6" },
+                        React.createElement(CheckBox, { className: "twa:flex-1", checked: rowSelection.Checkboxes ?? true, onChange: (checked) => updateRowSelection({ Checkboxes: checked }) }, "Show Row Selection Checkboxes"),
+                        mode === 'multiRow' && (React.createElement(CheckBox, { className: "twa:flex-1", checked: rowSelection.HeaderCheckbox ?? true, onChange: (checked) => updateRowSelection({ HeaderCheckbox: checked }) }, "Show Header Checkbox (to enable Select All)"))))),
+            (rowSelection.Checkboxes ?? true) && (React.createElement(Tabs, { className: "twa:mt-2" },
+                React.createElement(Tabs.Tab, null, "Row Grouping"),
+                React.createElement(Tabs.Content, null,
+                    React.createElement(RadioGroup, { orientation: "vertical", value: rowSelection.CheckboxInGroupColumn ?? false, name: "checkboxLocation", onRadioChange: (value) => updateRowSelection({ CheckboxInGroupColumn: value }) },
+                        React.createElement(Radio, { value: false }, "Show Row Selection Checkbox in dedicated Selection Column"),
+                        React.createElement(Radio, { value: true }, "Show Row Selection Checkbox in Row Grouped Column"))))),
+            React.createElement(Tabs, { className: "twa:mt-2" },
+                React.createElement(Tabs.Tab, null, "Row Click Selection (when user clicks on Row outside of Selection Checkbox)"),
+                React.createElement(Tabs.Content, null,
+                    React.createElement(RadioGroup, { orientation: "vertical", value: rowSelection.EnableClickSelection ?? false, name: "clickSelection", onRadioChange: (value) => updateRowSelection({ EnableClickSelection: value }) },
+                        React.createElement(Radio, { value: false }, "Disabled (Cannot select or deselect by clicking in Row)"),
+                        React.createElement(Radio, { value: true }, "Full (Enable selection by clicking in Row and deselection by Ctrl+clicking in Row)"),
+                        React.createElement(Radio, { value: 'enableSelection' }, "Selection Only (Enable selection by clicking in Row)"),
+                        React.createElement(Radio, { value: 'enableDeselection' }, "Deselection Only (Enable deselection by Ctrl+clicking in Row)")))),
+            mode === 'multiRow' && !isPivot && (React.createElement(Tabs, { className: "twa:mt-2" },
+                React.createElement(Tabs.Tab, null, "Grouped Row Selection Behaviour"),
+                React.createElement(Tabs.Content, null,
+                    React.createElement(RadioGroup, { orientation: "vertical", value: rowSelection.GroupSelectMode ?? 'self', name: "groupSelectMode", onRadioChange: (value) => updateRowSelection({ GroupSelectMode: value }) },
+                        React.createElement(Radio, { value: 'self' }, "Select Grouped Row Only (no cascade)"),
+                        React.createElement(Radio, { value: 'descendants' }, "Select Grouped Row and all descendants"),
+                        React.createElement(Radio, { value: 'filteredDescendants' }, "Select Grouped Row and only filtered descendants"))))),
+            mode === 'multiRow' && (React.createElement(Tabs, { className: "twa:mt-2" },
+                React.createElement(Tabs.Tab, null, "Select All (in Header) Behaviour"),
+                React.createElement(Tabs.Content, null,
+                    React.createElement(RadioGroup, { orientation: "vertical", value: rowSelection.SelectAllMode ?? 'all', name: "selectAllMode", onRadioChange: (value) => updateRowSelection({ SelectAllMode: value }) },
+                        React.createElement(Radio, { value: 'all' }, "All rows"),
+                        React.createElement(Radio, { value: 'filtered' }, "Filtered rows only"),
+                        React.createElement(Radio, { value: 'currentPage' }, "Current page only")))))))));
+};

package/src/View/NamedQuery/Wizard/NamedQuerySettingsWizardSection.js

@@ -1,4 +1,3 @@
-// TODO: move to named query
 import * as React from 'react';
 import WizardPanel from '../../../components/WizardPanel';
 import FormLayout, { FormRow } from '../../../components/FormLayout';

package/src/agGrid/AdaptableAgGrid.js

@@ -452,6 +452,7 @@ export class AdaptableAgGrid {
         columnDefs = LayoutManager.getColumnDefsChangesForLayout(layoutModel, columnDefs) ?? columnDefs;
         gridOptions.columnDefs = columnDefs;
         gridOptions.initialState = initialGridState;
+        const initialRowSelection = gridOptions.rowSelection;
         if (layoutModel) {
             if (isPivotLayoutModel(layoutModel)) {
                 gridOptions.pivotDefaultExpanded = layoutModel.PivotExpandLevel;
@@ -460,6 +461,14 @@ export class AdaptableAgGrid {
                 layoutModel.RowGroupDisplayType === 'multi' ? 'multipleColumns' : 'singleColumn';
             // fixes issue #3053
             gridOptions.suppressAggFuncInHeader = !!layoutModel.SuppressAggFuncInHeader;
+            if (!isPivotLayoutModel(layoutModel) &&
+                LayoutManager.shouldUnlockSelectionColumnPosition(layoutModel)) {
+                gridOptions.selectionColumnDef = {
+                    ...gridOptions.selectionColumnDef,
+                    lockPosition: false,
+                };
+            }
+            gridOptions.rowSelection = LayoutManager.getGridOptionForRowSelectionFromLayout(layoutModel.RowSelection, gridOptions.rowSelection);
         }
         this.lifecycleState = 'initAgGrid';
         this.agGridAdapter.initialGridOptions = gridOptions;
@@ -475,6 +484,7 @@ export class AdaptableAgGrid {
         this.layoutManager = new LayoutManager({
             gridApi: agGridApi,
             debugId: this.adaptableOptions.adaptableId,
+            initialRowSelection,
         });
         this.silentUpdateCurrentLayoutModel(layoutModel);
         // this shouldn't be needed

package/src/components/Dashboard/Dashboard.js

@@ -27,7 +27,7 @@ export function Dashboard(props) {
         left: position.x,
         top: position.y,
     };
-    const renderTabs = () => (React.createElement("div", { className: "ab-Dashboard__tabs" }, children &&
+    const renderTabs = () => (React.createElement("div", { className: "ab-Dashboard__tabs twa:whitespace-nowrap" }, children &&
         React.Children.map(children, (child, index) => (React.createElement("button", { type: "button", className: join('ab-Dashboard__tab', !collapsed && activeTabIndex === index ? 'ab-Dashboard__tab--active' : ''), key: index, onClick: () => {
                 if (activeTabIndex === index) {
                     setCollapsed(!collapsed);

package/src/components/DragAndDropContext/ModuleManager.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { BaseModuleTab, ModuleDraggableItem } from './types';
 export interface ModuleManagerProps {
     availableItems: ModuleDraggableItem[];
+    filterOutSelectedItems?: boolean;
     className?: string;
     disabled: boolean;
     onTabsChange: (tabs: BaseModuleTab[]) => void;