@adaptabletools/adaptable 22.0.11 → 22.1.0-canary.0

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/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,141 @@
+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 { 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 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, "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(React.Fragment, null,
+            React.createElement(Tabs, { className: "twa:mt-2" },
+                React.createElement(Tabs.Tab, null, "Options"),
+                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 selection checkboxes"),
+                        mode === 'multiRow' && (React.createElement(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, { flexDirection: "column", className: "twa:mt-3" },
+                        React.createElement(Box, { className: "twa:my-3" }, "Checkbox Location"),
+                        React.createElement(RadioGroup, { orientation: "vertical", value: rowSelection.CheckboxInGroupColumn ?? false, name: "checkboxLocation", onRadioChange: (value) => updateRowSelection({ CheckboxInGroupColumn: value }) },
+                            React.createElement(Radio, { value: false }, "Show selection checkbox in dedicated selection column"),
+                            React.createElement(Radio, { value: true }, "Show selection checkbox in group column")))))),
+            React.createElement(Tabs, { className: "twa:mt-2" },
+                React.createElement(Tabs.Tab, null, "Row Click Selection"),
+                React.createElement(Tabs.Content, null,
+                    React.createElement(HelpBlock, { 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(RadioGroup, { orientation: "vertical", value: rowSelection.EnableClickSelection ?? false, name: "clickSelection", onRadioChange: (value) => updateRowSelection({ EnableClickSelection: value }) },
+                        React.createElement(Radio, { value: false }, "Disabled"),
+                        React.createElement(Radio, { value: true }, "Enable selection and deselection"),
+                        React.createElement(Radio, { value: 'enableSelection' }, "Enable selection only"),
+                        React.createElement(Radio, { value: 'enableDeselection' }, "Enable deselection only")))),
+            mode === 'multiRow' && (React.createElement(Tabs, { className: "twa:mt-2" },
+                React.createElement(Tabs.Tab, null, "Group & Bulk Selection"),
+                React.createElement(Tabs.Content, null,
+                    React.createElement(Flex, { flexDirection: "row", className: "twa:gap-6" },
+                        React.createElement(Flex, { flexDirection: "row" },
+                            React.createElement(Box, { className: "twa:self-center twa:mr-3" }, "Group Select"),
+                            React.createElement(RadioGroup, { orientation: "vertical", value: rowSelection.GroupSelectMode ?? 'self', name: "groupSelectMode", onRadioChange: (value) => updateRowSelection({ GroupSelectMode: value }) },
+                                React.createElement(Radio, { value: 'self' }, "Only select group row (no cascade)"),
+                                React.createElement(Radio, { value: 'descendants' }, "Select group row and all descendants"),
+                                React.createElement(Radio, { value: 'filteredDescendants' }, "Select group row and filtered descendants"))),
+                        React.createElement(Flex, { flexDirection: "row", className: "twa:ml-6 twa:flex-1" },
+                            React.createElement(Box, { className: "twa:self-center twa:mr-3" }, "Select All"),
+                            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.isSelectionColumnInNonFirstPosition(layoutModel.TableColumns)) {
+                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;

package/src/components/DragAndDropContext/ModuleManager.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DragDropContext } from '../dnd';
+import { DragDropProvider } from '../dnd';
 import { DragAndDropContext } from './DragAndDropContext';
 import { TabList } from './TabList';
 import { UnusedPanel } from './UnusedPanel';
@@ -14,7 +14,6 @@ export const ModuleManager = (props) => {
             editTabName: true,
             dragAndDropTab: true,
             deleteTab: true,
-            // override default permitted actions
             ...permittedActions,
         };
         return {
@@ -22,34 +21,15 @@ export 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));
     };
@@ -76,17 +56,12 @@ export const ModuleManager = (props) => {
             };
         }));
     };
-    return (React.createElement(DragDropContext, { onDragEnd: (result) => {
-            if (result.type === 'TAB')
-                handleTabDragEnd(result);
-            if (result.type === 'TOOLBAR')
-                handleToolbarDragEnd(result);
-        } },
+    return (React.createElement(DragDropProvider, null,
         React.createElement(DragAndDropContext.Provider, { value: contextValue },
             React.createElement(Flex, { flexDirection: "column", className: clsx('ab-ModuleSelector twa:flex-1', className) },
-                React.createElement(UnusedPanel, { title: unusedPanelTitle, disabled: disabled, items: unusedItems, dragItemText: dragItemText }),
+                React.createElement(UnusedPanel, { title: unusedPanelTitle, disabled: disabled, items: allowedItems, dragItemText: dragItemText }),
                 React.createElement(Card, { className: "twa:flex-1 twa:m-2 ab-ModuleSelector-UsedPanel" },
                     React.createElement(Card.Title, { border: false }, tabsTitle),
                     React.createElement(Card.Body, { className: "twa:px-2" },
-                        React.createElement(TabList, { disabled: disabled, tabs: tabs, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName, onNewTab: contextValue.permittedActions.createTab ? handleTabAdd : undefined })))))));
+                        React.createElement(TabList, { disabled: disabled, tabs: tabs, onTabsChange: onTabsChange, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName, onNewTab: contextValue.permittedActions.createTab ? handleTabAdd : undefined })))))));
 };

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;