@adaptabletools/adaptable-cjs 22.0.11 → 22.1.0-canary.1

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

@@ -5,43 +5,29 @@ const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const dnd_1 = require("../../../components/dnd");
 const icons_1 = require("../../../components/icons");
-const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
 const Flex_1 = require("../../../components/Flex");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
-const twMerge_1 = require("../../../twMerge");
 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_1.Flex, { alignItems: "center", key: identifier ?? index, "data-index": index, "data-id": identifier, "data-name": "option", ...flexProps, className: (0, clsx_1.default)(`${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_1.Flex, { className: "twa:flex-1", flexDirection: "row", alignItems: "center" },
-                    reorderable ? (React.createElement(Flex_1.Box, { ...dragHandleProps, className: `twa:mr-3 ${dragHandleProps?.className || ''}` },
-                        React.createElement(icons_1.Icon, { name: "drag", style: { cursor: 'grab' } }))) : (React.createElement(Flex_1.Box, { className: "twa:mr-3" },
-                        React.createElement(icons_1.Icon, { name: "drag", style: { cursor: 'not-allowed', opacity: 0.3 } }))),
-                    props.renderOption(option, index))));
-        };
-        const reorderable = isOptionDraggable ? isOptionDraggable(option) : true;
-        return (React.createElement(dnd_1.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_1.Flex, { style: props.style, className: (0, twMerge_1.twMerge)(`${baseClassName} twa:flex-1`, props.className), flexDirection: "column" },
-        React.createElement(dnd_1.DragDropContext, { onDragEnd: (result) => {
-                const { source, destination } = result;
-                const newOrder = ArrayExtensions_1.default.reorderArray(props.order, source.index, destination.index);
-                onChange(newOrder);
-            } },
-            React.createElement(Flex_1.Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-auto`, flexDirection: "column" },
-                React.createElement(dnd_1.Droppable, { droppableId: "droppable" }, (droppableProvided) => {
-                    return (React.createElement("div", { ref: droppableProvided.innerRef, ...droppableProvided.droppableProps },
-                        order.map(renderOption),
-                        droppableProvided.placeholder));
-                })))));
+    return (React.createElement(Flex_1.Flex, { style: props.style, className: `${baseClassName} twa:flex-1`, flexDirection: "column" },
+        React.createElement(dnd_1.DragDropProvider, null,
+            React.createElement(Flex_1.Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-y-auto twa:overflow-x-hidden`, flexDirection: "column" },
+                React.createElement(dnd_1.DragList, { dragListId: "reorder-draggable", orientation: "vertical", dragStrategy: "proxy", preserveDragSpace: true, onDragProxyMove: dnd_1.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(dnd_1.DragList.DraggableItem, { key: identifier, id: `${identifier}` }, (itemDomProps, itemContext) => {
+                        const { onPointerDown, ...restDomProps } = itemDomProps;
+                        return (React.createElement(Flex_1.Flex, { alignItems: "center", "data-index": index, "data-id": identifier, "data-name": "option", ...restDomProps, className: (0, clsx_1.default)(`${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_1.Flex, { className: "twa:flex-1", flexDirection: "row", alignItems: "center" },
+                                reorderable && !disabled ? (React.createElement(Flex_1.Box, { onPointerDown: onPointerDown, className: "twa:mr-3" },
+                                    React.createElement(icons_1.Icon, { name: "drag", style: { cursor: 'grab' } }))) : (React.createElement(Flex_1.Box, { className: "twa:mr-3" },
+                                    React.createElement(icons_1.Icon, { name: "drag", style: { cursor: 'not-allowed', opacity: 0.3 } }))),
+                                props.renderOption(option, index))));
+                    }));
+                }))))))));
 }

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

@@ -10,7 +10,6 @@ const CheckBox_1 = require("../../../components/CheckBox");
 const icons_1 = require("../../../components/icons");
 const Radio_1 = tslib_1.__importDefault(require("../../../components/Radio"));
 const AdaptableFormControlTextClear_1 = require("../Forms/AdaptableFormControlTextClear");
-const ArrayExtensions_1 = tslib_1.__importDefault(require("../../../Utilities/Extensions/ArrayExtensions"));
 const Flex_1 = require("../../../components/Flex");
 const clsx_1 = tslib_1.__importDefault(require("clsx"));
 function useValuesMap({ options, value, toIdentifier, selectedMap, }) {
@@ -62,13 +61,14 @@ 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_1.Flex, { alignItems: "center", key: identifier ?? index, "data-index": index, "data-id": identifier, "data-name": "option", ...props, className: (0, clsx_1.default)(`twa:bg-primary twa:text-text-on-primary twa:rounded-standard twa:p-2`, {
+        return (React.createElement(dnd_1.DragList.DraggableItem, { key: identifier, id: `${identifier}` }, (itemDomProps) => {
+            const { onPointerDown, ...restDomProps } = itemDomProps;
+            return (React.createElement(Flex_1.Flex, { alignItems: "center", "data-index": index, "data-id": identifier, "data-name": "option", ...restDomProps, className: (0, clsx_1.default)('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_1.Flex, { flexDirection: "row", alignItems: "center", className: "twa:flex-1" },
-                    reorderable ? (React.createElement(Flex_1.Box, { ...dragHandleProps, className: (0, clsx_1.default)('twa:mr-3', dragHandleProps?.className) },
+                    reorderable ? (React.createElement(Flex_1.Box, { onPointerDown: onPointerDown, className: "twa:mr-3" },
                         React.createElement(icons_1.Icon, { name: "drag", style: { cursor: 'grab' } }))) : null,
                     singleSelect ? (React.createElement(Radio_1.default, { checked: selectedMap.has(identifier), "data-name": identifier, onChange: (checked) => {
                             if (checked) {
@@ -89,13 +89,6 @@ function ValueSelector(props) {
                             notifyChange();
                         }, checked: selectedMap.has(identifier) }, label)),
                     React.createElement(Flex_1.Box, { className: "twa:ml-2 twa:flex-1" }, allowReorder ? preparedToLabel(option) : null))));
-        };
-        return (React.createElement(dnd_1.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_1.CheckBox, { disabled: !value.length, checked: selectedOnly, onChange: setSelectedOnly }, showSelectedOnlyLabel ?? 'Show Selected Only'));
@@ -120,45 +113,48 @@ function ValueSelector(props) {
     return (React.createElement(Flex_1.Flex, { style: props.style, className: (0, clsx_1.default)('twa:flex-1', baseClassName), flexDirection: "column" },
         React.createElement(Flex_1.Flex, { className: "twa:mb-1" }, showFilterInput && filter ? (React.createElement(AdaptableFormControlTextClear_1.AdaptableFormControlTextClear, { value: searchInputValue, OnTextChange: setSearchInputValue, placeholder: "Type to search", className: "twa:flex-1 twa:border-0 twa:m-[3px]" })) : (React.createElement(Flex_1.Box, { className: "twa:flex-1" }))),
         (0, exports.renderSelectionSection)(selectionSectionProps),
-        React.createElement(dnd_1.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_1.default.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(dnd_1.DragDropProvider, null,
             React.createElement(Flex_1.Flex, { className: `${baseClassName}__body twa:flex-1 twa:overflow-auto`, flexDirection: "column" },
-                React.createElement(dnd_1.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(dnd_1.DragList, { dragListId: "value-selector", orientation: "vertical", onDragProxyMove: dnd_1.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))))))));
 }
 const renderSelectionSection = (props) => {
     const { value, options, disabled, singleSelect, toLabel, toIdentifier, } = props;

package/src/View/Dashboard/PinnedToolbarsSelector.js

@@ -41,6 +41,6 @@ const PinnedToolbarsSelector = (props) => {
             editTabName: false,
         }, onTabsChange: (tabs) => {
             dispatch((0, DashboardRedux_1.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" }));
 };
 exports.PinnedToolbarsSelector = PinnedToolbarsSelector;

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

@@ -17,6 +17,7 @@ const SortSection_1 = require("./sections/SortSection");
 const FilterSection_1 = require("./sections/FilterSection");
 const GridFilterSection_1 = require("./sections/GridFilterSection");
 const RowSummarySection_1 = require("./sections/RowSummarySection");
+const RowSelectionSection_1 = require("./sections/RowSelectionSection");
 const RowSummary_1 = require("../../../AdaptableState/Common/RowSummary");
 const isPivotLayout_1 = require("../../../Utilities/isPivotLayout");
 const PivotRowGroupingSection_1 = require("./sections/PivotRowGroupingSection");
@@ -118,7 +119,7 @@ const LayoutWizard = (props) => {
                 isValid: (data) => (0, PivotAggregationsSection_1.isPivotAggregationsSectionValid)(data),
                 render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(PivotAggregationsSection_1.PivotAggregationsSection, { onChange: (layout) => {
-                            let newLayout = (0, Helper_1.cloneObject)(layout);
+                            const newLayout = (0, Helper_1.cloneObject)(layout);
                             setLayout(newLayout);
                         } }))),
             },
@@ -148,6 +149,13 @@ const LayoutWizard = (props) => {
                 render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(GridFilterSection_1.GridFilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
+            {
+                title: 'Row Selection',
+                details: 'Configure Row Selection',
+                renderSummary: () => React.createElement(RowSelectionSection_1.RowSelectionSectionSummary, null),
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
+                    React.createElement(RowSelectionSection_1.RowSelectionSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+            },
             '-',
             {
                 details: 'Review your Pivot Layout',
@@ -261,6 +269,13 @@ const LayoutWizard = (props) => {
                 render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2 twa:h-full" },
                     React.createElement(GridFilterSection_1.GridFilterSection, { onChange: (newLayout) => setLayout(newLayout) }))),
             },
+            {
+                title: 'Row Selection',
+                details: 'Configure Row Selection',
+                renderSummary: () => React.createElement(RowSelectionSection_1.RowSelectionSectionSummary, null),
+                render: () => (React.createElement(Flex_1.Box, { className: "twa:p-2" },
+                    React.createElement(RowSelectionSection_1.RowSelectionSection, { onChange: (newLayout) => setLayout(newLayout) }))),
+            },
             '-',
             {
                 details: 'Review your Table Layout',

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

@@ -137,26 +137,29 @@ const ColumnsSectionSummary = () => {
         React.createElement(InfiniteTable_1.InfiniteTableGrid, { columnTypes: columnTypes, rowHeight: rowHeight, columnHeaderHeight: headerHeight, domProps: tableDOMProps, columns: columns })));
 };
 exports.ColumnsSectionSummary = ColumnsSectionSummary;
+const isSelectionColumn = (columnId) => columnId === GeneralConstants_1.AG_GRID_SELECTION_COLUMN;
 const isColumnVisible = (options) => {
     const { columnId, layout } = options;
     const isRowGroupColumn = (0, ColumnApiImpl_1.isAutoRowGroupColumn)(columnId);
     const visible = (!(0, isPivotLayout_1.isPivotLayout)(layout) &&
         layout.TableColumns.includes(columnId) &&
         layout.ColumnVisibility?.[columnId] !== false) ||
-        isRowGroupColumn;
+        isRowGroupColumn ||
+        isSelectionColumn(columnId);
     return visible;
 };
 const ColumnRow = (props) => {
     const adaptable = (0, AdaptableContext_1.useAdaptable)();
     const initialHeader = adaptable.api.columnApi.getFriendlyNameForColumnId(props.column.columnId, props.layout);
     const isRowGroupColumn = (0, ColumnApiImpl_1.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(Flex_1.Box, { "data-name": props.column.columnId, className: "twa:flex-1" },
         React.createElement(Flex_1.Flex, { className: "ab-Layout-Wizard__ColumnRow__Header twa:my-1" },
             React.createElement(CheckBox_1.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_1.Flex, { className: "twa:mx-2", alignItems: "center", "data-name": "column-label" }, initialHeader),
@@ -169,7 +172,12 @@ const ColumnsSection = (props) => {
     const { data: layout } = (0, OnePageAdaptableWizard_1.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) => {
@@ -180,14 +188,9 @@ 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) &&
@@ -214,13 +217,22 @@ const ColumnsSection = (props) => {
         !allColumns.find((col) => col.columnId === GeneralConstants_1.AG_GRID_GROUPED_COLUMN)) {
         allColumns.unshift((0, ColumnApiImpl_1.generateAutoTreeSingleColumn)());
     }
+    if (hasSelectionColumn) {
+        allColumns.unshift((0, ColumnApiImpl_1.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(GeneralConstants_1.AG_GRID_SELECTION_COLUMN)) {
+        TableColumns = [GeneralConstants_1.AG_GRID_SELECTION_COLUMN, ...TableColumns];
+    }
     const ColumnOrderAllColumns = ArrayExtensions_1.default.sortArrayWithOrder(allColumns.map((col) => col.columnId), TableColumns, { sortUnorderedItems: false }).map((colId) => colIdToCol[colId]);
     const currentOrder = searchInputValue
         ? ColumnOrderAllColumns.filter((col) => {
@@ -264,7 +276,7 @@ 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];
@@ -277,11 +289,11 @@ 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;
@@ -303,7 +315,7 @@ const ColumnsSection = (props) => {
         }
         onChange({
             ...layout,
-            TableColumns: TableColumns,
+            TableColumns: newTableColumns,
             ColumnVisibility,
         });
     };
@@ -457,7 +469,7 @@ 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))));
 };
 exports.ColumnsSection = ColumnsSection;
@@ -500,7 +512,7 @@ const ColumnPropertiesEditor = (props) => {
             React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-3 twa:mt-3" },
                 React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:gap-1" },
                     "Header",
-                    React.createElement(Input_1.default, { "data-name": "column-header", className: "ab-Layout-Wizard__ColumnPropertiesEditor__Input twa:w-full", placeholder: "Custom name (optional)", onChange: () => {
+                    React.createElement(Input_1.default, { "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(Flex_1.Box, { className: "twa:grid twa:grid-cols-[1fr_1fr] twa:gap-2" },

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

@@ -97,7 +97,7 @@ const RowGroupingSection = (props) => {
                             onChange(newLayout);
                         } },
                         React.createElement(TypeRadio_1.TypeRadio, { value: "single", text: "Single Column", description: "All Row Grouped Columns display in one hierarchical Column" }),
-                        React.createElement(TypeRadio_1.TypeRadio, { value: "multi", text: "Multiple Columns", description: "Each Row Grouped Columns displays in its own, separate, Column" }))))),
+                        React.createElement(TypeRadio_1.TypeRadio, { value: "multi", text: "Multiple Columns", description: "Each Row Grouped Column displays in its own, separate, Column" }))))),
         React.createElement(Tabs_1.Tabs, { className: "twa:mt-2" },
             React.createElement(Tabs_1.Tabs.Tab, null, "Row Grouped Columns"),
             React.createElement(Tabs_1.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,146 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RowSelectionSection = exports.RowSelectionSectionSummary = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const CheckBox_1 = require("../../../../components/CheckBox");
+const Radio_1 = tslib_1.__importStar(require("../../../../components/Radio"));
+const Radio_2 = require("../../../../components/Radio");
+const Tabs_1 = require("../../../../components/Tabs");
+const Tag_1 = require("../../../../components/Tag");
+const OnePageAdaptableWizard_1 = require("../../../Wizard/OnePageAdaptableWizard");
+const Flex_1 = require("../../../../components/Flex");
+const twMerge_1 = require("../../../../twMerge");
+const HelpBlock_1 = tslib_1.__importDefault(require("../../../../components/HelpBlock"));
+const isPivotLayout_1 = require("../../../../Utilities/isPivotLayout");
+const GeneralConstants_1 = require("../../../../Utilities/Constants/GeneralConstants");
+const RowSelectionSectionSummary = () => {
+    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    if (layout.RowSelection === false) {
+        return (React.createElement(Flex_1.Box, null,
+            React.createElement(Tag_1.Tag, null, "Row Selection Disabled")));
+    }
+    if (!layout.RowSelection) {
+        return (React.createElement(Flex_1.Box, null,
+            React.createElement(Tag_1.Tag, null, "Default (from Grid Options)")));
+    }
+    const rs = layout.RowSelection;
+    return (React.createElement(Flex_1.Box, null,
+        React.createElement(Tag_1.Tag, { className: "twa:mr-2" },
+            "Mode: ",
+            rs.Mode === 'multiRow' ? 'Multi Row' : 'Single Row'),
+        rs.Checkboxes != null && (React.createElement(Tag_1.Tag, { className: "twa:mr-2" },
+            "Checkboxes: ",
+            rs.Checkboxes ? 'Yes' : 'No')),
+        rs.HeaderCheckbox != null && (React.createElement(Tag_1.Tag, { className: "twa:mr-2" },
+            "Header Checkbox: ",
+            rs.HeaderCheckbox ? 'Yes' : 'No')),
+        rs.EnableClickSelection != null && (React.createElement(Tag_1.Tag, { className: "twa:mr-2" },
+            "Click Selection: ",
+            String(rs.EnableClickSelection))),
+        rs.CheckboxInGroupColumn != null && (React.createElement(Tag_1.Tag, { className: "twa:mr-2" },
+            "Checkbox Location: ",
+            rs.CheckboxInGroupColumn ? 'Group Column' : 'Selection Column')),
+        rs.GroupSelectMode != null && (React.createElement(Tag_1.Tag, { className: "twa:mr-2" },
+            "Group Select Mode: ",
+            rs.GroupSelectMode)),
+        rs.SelectAllMode != null && (React.createElement(Tag_1.Tag, { className: "twa:mr-2" },
+            "Select All Mode: ",
+            rs.SelectAllMode))));
+};
+exports.RowSelectionSectionSummary = RowSelectionSectionSummary;
+function getMode(layout) {
+    if (!layout.RowSelection) {
+        return false;
+    }
+    return layout.RowSelection.Mode;
+}
+const RowSelectionSection = (props) => {
+    const { data: layout } = (0, OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext)();
+    const mode = getMode(layout);
+    const isPivot = (0, isPivotLayout_1.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(GeneralConstants_1.AG_GRID_SELECTION_COLUMN)) {
+                    newLayout.TableColumns = [GeneralConstants_1.AG_GRID_SELECTION_COLUMN, ...(newLayout.TableColumns ?? [])];
+                }
+            }
+            else if (newLayout.PivotColumns) {
+                if (!newLayout.PivotColumns.includes(GeneralConstants_1.AG_GRID_SELECTION_COLUMN)) {
+                    newLayout.PivotColumns = [GeneralConstants_1.AG_GRID_SELECTION_COLUMN, ...(newLayout.PivotColumns ?? [])];
+                }
+            }
+        }
+        props.onChange(newLayout);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Tabs_1.Tabs, null,
+            React.createElement(Tabs_1.Tabs.Tab, null, "Row Selection Mode"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(Flex_1.Flex, { flexDirection: "column" },
+                    React.createElement(Radio_2.RadioGroup, { orientation: "horizontal", variant: "text-only", className: (0, twMerge_1.twMerge)(Radio_1.radioGroupStyling.horizontalTextOnly, 'twa:gap-2 twa:max-w-[500px] twa:bg-defaultbackground twa:p-2'), value: mode, name: "rowSelectionMode", onRadioChange: handleModeChange },
+                        React.createElement(Radio_1.default, { value: false }, "Disabled"),
+                        React.createElement(Radio_1.default, { value: "singleRow" }, "Single Row"),
+                        React.createElement(Radio_1.default, { value: "multiRow" }, "Multi Row"))))),
+        !rowSelection && React.createElement(HelpBlock_1.default, null, "There is no Row Selection configured for this Layout"),
+        rowSelection && (React.createElement(React.Fragment, null,
+            React.createElement(Tabs_1.Tabs, { className: "twa:mt-2" },
+                React.createElement(Tabs_1.Tabs.Tab, null, "Row Selection Column"),
+                React.createElement(Tabs_1.Tabs.Content, null,
+                    React.createElement(Flex_1.Flex, { flexDirection: "row", className: "twa:gap-6" },
+                        React.createElement(CheckBox_1.CheckBox, { className: "twa:flex-1", checked: rowSelection.Checkboxes ?? true, onChange: (checked) => updateRowSelection({ Checkboxes: checked }) }, "Show Row Selection Checkboxes"),
+                        mode === 'multiRow' && (React.createElement(CheckBox_1.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_1.Tabs, { className: "twa:mt-2" },
+                React.createElement(Tabs_1.Tabs.Tab, null, "Row Grouping"),
+                React.createElement(Tabs_1.Tabs.Content, null,
+                    React.createElement(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.CheckboxInGroupColumn ?? false, name: "checkboxLocation", onRadioChange: (value) => updateRowSelection({ CheckboxInGroupColumn: value }) },
+                        React.createElement(Radio_1.default, { value: false }, "Show Row Selection Checkbox in dedicated Selection Column"),
+                        React.createElement(Radio_1.default, { value: true }, "Show Row Selection Checkbox in Row Grouped Column"))))),
+            React.createElement(Tabs_1.Tabs, { className: "twa:mt-2" },
+                React.createElement(Tabs_1.Tabs.Tab, null, "Row Click Selection (when user clicks on Row outside of Selection Checkbox)"),
+                React.createElement(Tabs_1.Tabs.Content, null,
+                    React.createElement(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.EnableClickSelection ?? false, name: "clickSelection", onRadioChange: (value) => updateRowSelection({ EnableClickSelection: value }) },
+                        React.createElement(Radio_1.default, { value: false }, "Disabled (Cannot select or deselect by clicking in Row)"),
+                        React.createElement(Radio_1.default, { value: true }, "Full (Enable selection by clicking in Row and deselection by Ctrl+clicking in Row)"),
+                        React.createElement(Radio_1.default, { value: 'enableSelection' }, "Selection Only (Enable selection by clicking in Row)"),
+                        React.createElement(Radio_1.default, { value: 'enableDeselection' }, "Deselection Only (Enable deselection by Ctrl+clicking in Row)")))),
+            mode === 'multiRow' && !isPivot && (React.createElement(Tabs_1.Tabs, { className: "twa:mt-2" },
+                React.createElement(Tabs_1.Tabs.Tab, null, "Grouped Row Selection Behaviour"),
+                React.createElement(Tabs_1.Tabs.Content, null,
+                    React.createElement(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.GroupSelectMode ?? 'self', name: "groupSelectMode", onRadioChange: (value) => updateRowSelection({ GroupSelectMode: value }) },
+                        React.createElement(Radio_1.default, { value: 'self' }, "Select Grouped Row Only (no cascade)"),
+                        React.createElement(Radio_1.default, { value: 'descendants' }, "Select Grouped Row and all descendants"),
+                        React.createElement(Radio_1.default, { value: 'filteredDescendants' }, "Select Grouped Row and only filtered descendants"))))),
+            mode === 'multiRow' && (React.createElement(Tabs_1.Tabs, { className: "twa:mt-2" },
+                React.createElement(Tabs_1.Tabs.Tab, null, "Select All (in Header) Behaviour"),
+                React.createElement(Tabs_1.Tabs.Content, null,
+                    React.createElement(Radio_2.RadioGroup, { orientation: "vertical", value: rowSelection.SelectAllMode ?? 'all', name: "selectAllMode", onRadioChange: (value) => updateRowSelection({ SelectAllMode: value }) },
+                        React.createElement(Radio_1.default, { value: 'all' }, "All rows"),
+                        React.createElement(Radio_1.default, { value: 'filtered' }, "Filtered rows only"),
+                        React.createElement(Radio_1.default, { value: 'currentPage' }, "Current page only")))))))));
+};
+exports.RowSelectionSection = RowSelectionSection;

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

@@ -2,7 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NamedQuerySettingsWizardSection = exports.renderNamedQuerySettingsSummary = exports.isValidNamedQuerySettings = void 0;
 const tslib_1 = require("tslib");
-// TODO: move to named query
 const React = tslib_1.__importStar(require("react"));
 const WizardPanel_1 = tslib_1.__importDefault(require("../../../components/WizardPanel"));
 const FormLayout_1 = tslib_1.__importStar(require("../../../components/FormLayout"));

package/src/agGrid/AdaptableAgGrid.js

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

package/src/components/Dashboard/Dashboard.js

@@ -31,7 +31,7 @@ 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: (0, join_1.default)('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;