@adaptabletools/adaptable-cjs 22.0.10 → 22.1.0-canary.0

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/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,147 @@
+"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 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 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, "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(React.Fragment, null,
+            React.createElement(Tabs_1.Tabs, { className: "twa:mt-2" },
+                React.createElement(Tabs_1.Tabs.Tab, null, "Options"),
+                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 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 for select all"))),
+                    (rowSelection.Checkboxes ?? true) && (React.createElement(Flex_1.Flex, { flexDirection: "column", className: "twa:mt-3" },
+                        React.createElement(Flex_1.Box, { className: "twa:my-3" }, "Checkbox Location"),
+                        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 selection checkbox in dedicated selection column"),
+                            React.createElement(Radio_1.default, { value: true }, "Show selection checkbox in group column")))))),
+            React.createElement(Tabs_1.Tabs, { className: "twa:mt-2" },
+                React.createElement(Tabs_1.Tabs.Tab, null, "Row Click Selection"),
+                React.createElement(Tabs_1.Tabs.Content, null,
+                    React.createElement(HelpBlock_1.default, { className: "twa:bg-primarydark/30 twa:text-text-on-primarydark twa:p-2 twa:rounded-standard twa:mb-2" },
+                        React.createElement("p", null, "This describes the behaviour of the row selection when the user clicks on a row, but outside the row selection checkbox."),
+                        React.createElement("p", null, "Should a click outside the checkbox select the row?")),
+                    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"),
+                        React.createElement(Radio_1.default, { value: true }, "Enable selection and deselection"),
+                        React.createElement(Radio_1.default, { value: 'enableSelection' }, "Enable selection only"),
+                        React.createElement(Radio_1.default, { value: 'enableDeselection' }, "Enable deselection only")))),
+            mode === 'multiRow' && (React.createElement(Tabs_1.Tabs, { className: "twa:mt-2" },
+                React.createElement(Tabs_1.Tabs.Tab, null, "Group & Bulk Selection"),
+                React.createElement(Tabs_1.Tabs.Content, null,
+                    React.createElement(Flex_1.Flex, { flexDirection: "row", className: "twa:gap-6" },
+                        React.createElement(Flex_1.Flex, { flexDirection: "row" },
+                            React.createElement(Flex_1.Box, { className: "twa:self-center twa:mr-3" }, "Group Select"),
+                            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' }, "Only select group row (no cascade)"),
+                                React.createElement(Radio_1.default, { value: 'descendants' }, "Select group row and all descendants"),
+                                React.createElement(Radio_1.default, { value: 'filteredDescendants' }, "Select group row and filtered descendants"))),
+                        React.createElement(Flex_1.Flex, { flexDirection: "row", className: "twa:ml-6 twa:flex-1" },
+                            React.createElement(Flex_1.Box, { className: "twa:self-center twa:mr-3" }, "Select All"),
+                            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.isSelectionColumnInNonFirstPosition(layoutModel.TableColumns)) {
+                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;

package/src/components/DragAndDropContext/ModuleManager.js

@@ -18,7 +18,6 @@ const ModuleManager = (props) => {
             editTabName: true,
             dragAndDropTab: true,
             deleteTab: true,
-            // override default permitted actions
             ...permittedActions,
         };
         return {
@@ -26,34 +25,15 @@ const ModuleManager = (props) => {
             availableItems: props.availableItems,
         };
     }, [props.availableItems, props.permittedActions]);
-    const unusedItems = React.useMemo(() => availableItems
-        .map((t) => t.Id)
-        .filter((item) => {
-        return !tabs.some((tab) => tab.Items?.includes(item));
-    }), [tabs, availableItems]);
-    const handleToolbarDragEnd = (result) => {
-        const { source, destination, draggableId } = result;
-        if (!source || !destination) {
-            return;
+    const allowedItems = React.useMemo(() => {
+        let result = availableItems.map((t) => t.Id);
+        if (props.filterOutSelectedItems) {
+            result = result.filter((item) => {
+                return !tabs.some((tab) => tab.Items?.includes(item));
+            });
         }
-        if (source.droppableId !== 'UNUSED') {
-            const sourceTabToolbars = tabs[Number(source.droppableId)].Items;
-            sourceTabToolbars.splice(source.index, 1);
-        }
-        if (destination.droppableId !== 'UNUSED') {
-            const destinationTabToolbars = tabs[Number(destination.droppableId)].Items;
-            destinationTabToolbars.splice(destination.index, 0, draggableId);
-        }
-        onTabsChange([...tabs]);
-    };
-    const handleTabDragEnd = (result) => {
-        const { source, destination } = result;
-        if (!source || !destination)
-            return;
-        const [removed] = tabs.splice(source.index, 1);
-        tabs.splice(destination.index, 0, removed);
-        onTabsChange([...tabs]);
-    };
+        return result;
+    }, [tabs, availableItems]);
     const handleRemoveTab = (tabIndex) => {
         onTabsChange(tabs.filter((_, index) => index !== tabIndex));
     };
@@ -80,18 +60,13 @@ const ModuleManager = (props) => {
             };
         }));
     };
-    return (React.createElement(dnd_1.DragDropContext, { onDragEnd: (result) => {
-            if (result.type === 'TAB')
-                handleTabDragEnd(result);
-            if (result.type === 'TOOLBAR')
-                handleToolbarDragEnd(result);
-        } },
+    return (React.createElement(dnd_1.DragDropProvider, null,
         React.createElement(DragAndDropContext_1.DragAndDropContext.Provider, { value: contextValue },
             React.createElement(Flex_1.Flex, { flexDirection: "column", className: (0, clsx_1.default)('ab-ModuleSelector twa:flex-1', className) },
-                React.createElement(UnusedPanel_1.UnusedPanel, { title: unusedPanelTitle, disabled: disabled, items: unusedItems, dragItemText: dragItemText }),
+                React.createElement(UnusedPanel_1.UnusedPanel, { title: unusedPanelTitle, disabled: disabled, items: allowedItems, dragItemText: dragItemText }),
                 React.createElement(Card_1.Card, { className: "twa:flex-1 twa:m-2 ab-ModuleSelector-UsedPanel" },
                     React.createElement(Card_1.Card.Title, { border: false }, tabsTitle),
                     React.createElement(Card_1.Card.Body, { className: "twa:px-2" },
-                        React.createElement(TabList_1.TabList, { disabled: disabled, tabs: tabs, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName, onNewTab: contextValue.permittedActions.createTab ? handleTabAdd : undefined })))))));
+                        React.createElement(TabList_1.TabList, { disabled: disabled, tabs: tabs, onTabsChange: onTabsChange, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName, onNewTab: contextValue.permittedActions.createTab ? handleTabAdd : undefined })))))));
 };
 exports.ModuleManager = ModuleManager;

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

@@ -1,30 +1,35 @@
 import * as React from 'react';
 import { BaseModuleTab } from './types';
-export declare function TabList({ tabs, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, onNewTab, }: {
+export declare function TabList({ tabs, onTabsChange, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, onNewTab, }: {
     disabled: boolean;
     tabs: BaseModuleTab[];
+    onTabsChange: (tabs: BaseModuleTab[]) => void;
     onRemoveTab: (tabIndex: number) => void;
     onRemoveToolbar: (tabIndex: number, toolbarIndex: number) => void;
     onChangeTabName: (tabIndex: number, tabName: string) => void;
     onNewTab?: () => void;
 }): React.JSX.Element;
-export declare function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onChangeTabName, disabled, }: {
+export declare function TabItem({ tab, tabId, tabIndex, tabs, onTabsChange, onRemove, onRemoveToolbar, onChangeTabName, disabled, }: {
     tab: BaseModuleTab;
+    tabId: string;
     tabIndex: number;
+    tabs: BaseModuleTab[];
+    onTabsChange: (tabs: BaseModuleTab[]) => void;
     disabled: boolean;
     onRemove: () => void;
     onRemoveToolbar: (toolbarIndex: number) => void;
     onChangeTabName: (tabName: string) => void;
 }): React.JSX.Element;
-export declare function ToolbarList({ toolbars, droppableId, onRemove, disabled, }: {
+export declare function ToolbarList({ toolbars, tabIndex, tabs, onTabsChange, onRemove, disabled, }: {
     toolbars: string[];
-    droppableId: string;
+    tabIndex: number;
+    tabs: BaseModuleTab[];
+    onTabsChange: (tabs: BaseModuleTab[]) => void;
     disabled: boolean;
     onRemove: (toolbarIndex: number) => void;
 }): React.JSX.Element;
-export declare function ToolbarItem({ toolbar, toolbarIndex, onRemove, disabled, }: {
+export declare function ToolbarItem({ toolbar, onRemove, disabled, }: {
     disabled: boolean;
     toolbar: string;
-    toolbarIndex: number;
     onRemove: () => void;
 }): React.JSX.Element;