@adaptabletools/adaptable-cjs 23.0.0-canary.6 → 23.0.0-canary.8

package/src/components/DragAndDropContext/ModuleManager.js

@@ -9,10 +9,16 @@ const DragAndDropContext_1 = require("./DragAndDropContext");
 const TabList_1 = require("./TabList");
 const UnusedPanel_1 = require("./UnusedPanel");
 const Flex_1 = require("../Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
 const Card_1 = require("../Card");
+const utils_1 = require("../../lib/utils");
 const ModuleManager = (props) => {
-    const { availableItems, tabs, onTabsChange, tabsTitle, disabled, unusedPanelTitle, dragItemText, permittedActions, className, } = props;
+    const { availableItems, tabs, onTabsChange, tabsTitle, disabled, unusedPanelTitle, dragItemText, unusedItemGroups, unusedItemGroupsLayout = 'row', permittedActions, className, layout = 'tabs', dragScope = 'default', } = props;
+    const unusedListIds = React.useMemo(() => {
+        if (unusedItemGroups?.length) {
+            return unusedItemGroups.map((group, index) => group.listId ?? `UNUSED-${index}`);
+        }
+        return [DragAndDropContext_1.DEFAULT_UNUSED_LIST_ID];
+    }, [unusedItemGroups]);
     const contextValue = React.useMemo(() => {
         const preparedPermittedAction = {
             createTab: true,
@@ -24,8 +30,10 @@ const ModuleManager = (props) => {
         return {
             permittedActions: preparedPermittedAction,
             availableItems: props.availableItems,
+            dragScope,
+            unusedListIds,
         };
-    }, [props.availableItems, props.permittedActions]);
+    }, [props.availableItems, props.permittedActions, dragScope, unusedListIds, permittedActions]);
     const allowedItems = React.useMemo(() => {
         let result = availableItems.map((t) => t.Id);
         if (props.filterOutSelectedItems) {
@@ -61,6 +69,37 @@ const ModuleManager = (props) => {
             };
         }));
     };
-    return ((0, jsx_runtime_1.jsx)(dnd_1.DragDropProvider, { children: (0, jsx_runtime_1.jsx)(DragAndDropContext_1.DragAndDropContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: (0, clsx_1.default)('ab-ModuleSelector twa:flex-1', className), children: [(0, jsx_runtime_1.jsx)(UnusedPanel_1.UnusedPanel, { title: unusedPanelTitle, disabled: disabled, items: allowedItems, dragItemText: dragItemText }), (0, jsx_runtime_1.jsxs)(Card_1.Card, { className: "twa:flex-1 twa:m-2 ab-ModuleSelector-UsedPanel", children: [(0, jsx_runtime_1.jsx)(Card_1.Card.Title, { border: false, children: tabsTitle }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:px-2", children: (0, jsx_runtime_1.jsx)(TabList_1.TabList, { disabled: disabled, tabs: tabs, onTabsChange: onTabsChange, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName, onNewTab: contextValue.permittedActions.createTab ? handleTabAdd : undefined }) })] })] }) }) }));
+    const renderUnusedItemGroups = () => {
+        const groupsLayout = unusedItemGroups.length > 1 ? unusedItemGroupsLayout : 'column';
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [dragItemText ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:pb-2 twa:text-sm twa:opacity-80", children: dragItemText })) : null, (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: groupsLayout === 'row' ? 'row' : 'column', className: (0, utils_1.cn)('twa:gap-2 ab-ModuleSelector__UnusedGroups', {
+                        'ab-ModuleSelector__UnusedGroups--row': groupsLayout === 'row',
+                    }), children: unusedItemGroups.map((group, index) => {
+                        const listId = group.listId ?? `UNUSED-${index}`;
+                        return ((0, jsx_runtime_1.jsxs)(Card_1.Card, { className: (0, utils_1.cn)('twa:m-0 ab-ModuleSelector__UnusedGroup', {
+                                'twa:flex-1 twa:min-w-0': groupsLayout === 'row',
+                            }), children: [(0, jsx_runtime_1.jsxs)(Card_1.Card.Title, { border: false, className: "twa:py-2", children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-sm twa:font-medium", children: group.title }), group.help ? ((0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal", children: group.help })) : null] }), (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:px-0 twa:pt-0", children: (0, jsx_runtime_1.jsx)(UnusedPanel_1.UnusedPanel, { listId: listId, disabled: disabled, items: group.items }) })] }, listId));
+                    }) })] }));
+    };
+    const renderAvailableItemPanels = (options) => {
+        const includeOuterPadding = options?.includeOuterPadding ?? true;
+        if (unusedItemGroups?.length) {
+            const content = renderUnusedItemGroups();
+            if (!includeOuterPadding) {
+                return content;
+            }
+            return (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:px-2 twa:mb-2", children: content });
+        }
+        return ((0, jsx_runtime_1.jsx)(UnusedPanel_1.UnusedPanel, { title: unusedPanelTitle, disabled: disabled, items: allowedItems, dragItemText: dragItemText }));
+    };
+    const renderUsedPanelCard = () => ((0, jsx_runtime_1.jsxs)(Card_1.Card, { className: "twa:m-0 ab-ModuleSelector-UsedPanel", children: [tabsTitle ? (0, jsx_runtime_1.jsx)(Card_1.Card.Title, { border: false, children: tabsTitle }) : null, (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:px-2", children: (0, jsx_runtime_1.jsx)(TabList_1.TabList, { variant: layout === 'rows' ? 'rows' : 'columns', disabled: disabled, tabs: tabs, onTabsChange: onTabsChange, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName, onNewTab: contextValue.permittedActions.createTab ? handleTabAdd : undefined }) })] }));
+    if (layout === 'strip') {
+        const stripTab = tabs[0] ?? { Name: '', Items: [] };
+        return ((0, jsx_runtime_1.jsx)(dnd_1.DragDropProvider, { children: (0, jsx_runtime_1.jsx)(DragAndDropContext_1.DragAndDropContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: (0, utils_1.cn)('ab-ModuleSelector ab-ModuleSelector--strip', className), children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:pb-1", children: renderAvailableItemPanels() }), (0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:px-2 twa:pb-1", children: (0, jsx_runtime_1.jsx)(TabList_1.ToolbarList, { compact: true, orientation: "horizontal", disabled: disabled, toolbars: stripTab.Items ?? [], tabIndex: 0, tabs: tabs, onTabsChange: onTabsChange, onRemove: (toolbarIndex) => handleRemoveToolbar(0, toolbarIndex) }) })] }) }) }));
+    }
+    if (layout === 'rows') {
+        const alignUsedPanelWithGroups = Boolean(unusedItemGroups?.length);
+        return ((0, jsx_runtime_1.jsx)(dnd_1.DragDropProvider, { children: (0, jsx_runtime_1.jsx)(DragAndDropContext_1.DragAndDropContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(Flex_1.Flex, { flexDirection: "column", className: (0, utils_1.cn)('ab-ModuleSelector ab-ModuleSelector--rows', className), children: alignUsedPanelWithGroups ? ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:px-2 twa:flex twa:flex-col twa:gap-2", children: [renderAvailableItemPanels({ includeOuterPadding: false }), renderUsedPanelCard()] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Flex_1.Box, { className: "twa:pb-1", children: renderAvailableItemPanels() }), renderUsedPanelCard()] })) }) }) }));
+    }
+    return ((0, jsx_runtime_1.jsx)(dnd_1.DragDropProvider, { children: (0, jsx_runtime_1.jsx)(DragAndDropContext_1.DragAndDropContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsxs)(Flex_1.Flex, { flexDirection: "column", className: (0, utils_1.cn)('ab-ModuleSelector twa:flex-1', className), children: [renderAvailableItemPanels(), (0, jsx_runtime_1.jsxs)(Card_1.Card, { className: "twa:flex-1 twa:m-0 ab-ModuleSelector-UsedPanel", children: [tabsTitle ? (0, jsx_runtime_1.jsx)(Card_1.Card.Title, { border: false, children: tabsTitle }) : null, (0, jsx_runtime_1.jsx)(Card_1.Card.Body, { className: "twa:px-2", children: (0, jsx_runtime_1.jsx)(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,6 +1,7 @@
 import * as React from 'react';
 import { BaseModuleTab } from './types';
-export declare function TabList({ tabs, onTabsChange, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, onNewTab, }: {
+export type TabListVariant = 'columns' | 'rows';
+export declare function TabList({ tabs, onTabsChange, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, onNewTab, variant, }: {
     disabled: boolean;
     tabs: BaseModuleTab[];
     onTabsChange: (tabs: BaseModuleTab[]) => void;
@@ -8,8 +9,9 @@ export declare function TabList({ tabs, onTabsChange, onRemoveTab, onRemoveToolb
     onRemoveToolbar: (tabIndex: number, toolbarIndex: number) => void;
     onChangeTabName: (tabIndex: number, tabName: string) => void;
     onNewTab?: () => void;
+    variant?: TabListVariant;
 }): React.JSX.Element;
-export declare function TabItem({ tab, tabId, tabIndex, tabs, onTabsChange, onRemove, onRemoveToolbar, onChangeTabName, disabled, }: {
+export declare function TabItem({ tab, tabId, tabIndex, tabs, onTabsChange, onRemove, onRemoveToolbar, onChangeTabName, disabled, variant, }: {
     tab: BaseModuleTab;
     tabId: string;
     tabIndex: number;
@@ -19,17 +21,22 @@ export declare function TabItem({ tab, tabId, tabIndex, tabs, onTabsChange, onRe
     onRemove: () => void;
     onRemoveToolbar: (toolbarIndex: number) => void;
     onChangeTabName: (tabName: string) => void;
+    variant?: TabListVariant;
 }): React.JSX.Element;
-export declare function ToolbarList({ toolbars, tabIndex, tabs, onTabsChange, onRemove, disabled, }: {
+export declare function ToolbarList({ toolbars, tabIndex, tabs, onTabsChange, onRemove, disabled, orientation, compact, embedded, }: {
     toolbars: string[];
     tabIndex: number;
     tabs: BaseModuleTab[];
     onTabsChange: (tabs: BaseModuleTab[]) => void;
     disabled: boolean;
     onRemove: (toolbarIndex: number) => void;
+    orientation?: 'vertical' | 'horizontal';
+    compact?: boolean;
+    embedded?: boolean;
 }): React.JSX.Element;
-export declare function ToolbarItem({ toolbar, onRemove, disabled, }: {
+export declare function ToolbarItem({ toolbar, onRemove, disabled, compact, }: {
     disabled: boolean;
     toolbar: string;
     onRemove: () => void;
+    compact?: boolean;
 }): React.JSX.Element;

package/src/components/DragAndDropContext/TabList.js

@@ -11,9 +11,13 @@ const dnd_1 = require("../dnd");
 const icons_1 = require("../icons");
 const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
 const DragAndDropContext_1 = require("./DragAndDropContext");
+const dragScope_1 = require("./dragScope");
 const Flex_1 = require("../Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
-function TabList({ tabs, onTabsChange, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, onNewTab, }) {
+const utils_1 = require("../../lib/utils");
+function TabList({ tabs, onTabsChange, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, onNewTab, variant = 'columns', }) {
+    const isRows = variant === 'rows';
+    const { dragScope } = React.useContext(DragAndDropContext_1.DragAndDropContext);
+    const tabsListId = (0, dragScope_1.scopeListId)(dragScope, 'TABS');
     const tabIdsRef = React.useRef(new WeakMap());
     const nextTabIdRef = React.useRef(0);
     const getTabStableId = React.useCallback((tab) => {
@@ -25,18 +29,22 @@ function TabList({ tabs, onTabsChange, onRemoveTab, onRemoveToolbar, onChangeTab
         tabIdsRef.current.set(tab, newId);
         return newId;
     }, []);
-    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList, { dragListId: "TABS", orientation: "horizontal", dragStrategy: "proxy", preserveDragSpace: true, onDragProxyMove: dnd_1.defaultDragProxyMove, onDrop: (sortedIndexes) => {
+    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList, { dragListId: tabsListId, orientation: isRows ? 'vertical' : 'horizontal', dragStrategy: "proxy", preserveDragSpace: true, onDragProxyMove: dnd_1.defaultDragProxyMove, onDrop: (sortedIndexes) => {
             const newTabs = sortedIndexes.map((i) => tabs[i]);
             onTabsChange(newTabs);
-        }, children: (listDomProps) => ((0, jsx_runtime_1.jsxs)("div", { ...listDomProps, className: (0, clsx_1.default)('ab-ModuleSelector__TabList twa:flex twa:flex-1 twa:overflow-auto', listDomProps.className), "data-name": "dashboard-tabs", children: [tabs.map((tab, tabIndex) => {
+        }, children: (listDomProps) => ((0, jsx_runtime_1.jsxs)("div", { ...listDomProps, className: (0, utils_1.cn)('ab-ModuleSelector__TabList twa:flex', isRows
+                ? 'ab-ModuleSelector__TabList--rows twa:flex-col twa:gap-2'
+                : 'twa:flex-1 twa:overflow-auto', listDomProps.className), "data-name": "dashboard-tabs", children: [tabs.map((tab, tabIndex) => {
                     const tabId = getTabStableId(tab);
-                    return ((0, jsx_runtime_1.jsx)(TabItem, { disabled: disabled, tabId: tabId, tabIndex: tabIndex, tabs: tabs, onTabsChange: onTabsChange, tab: tab, onRemove: () => onRemoveTab(tabIndex), onRemoveToolbar: (toolbarIndex) => onRemoveToolbar(tabIndex, toolbarIndex), onChangeTabName: (tabName) => onChangeTabName(tabIndex, tabName) }, tabIndex));
-                }), !disabled && onNewTab ? ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", justifyContent: "center", className: "ab-ModuleSelector__TabItem twa:min-w-32 twa:border-dashed twa:cursor-pointer twa:bg-primarylight twa:text-primary-foreground twa:hover:bg-primary", onClick: onNewTab, children: (0, jsx_runtime_1.jsxs)("div", { className: "twa:text-8 twa:flex twa:flex-col twa:gap-4 twa:items-center twa:italic", children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "plus", size: 32 }), "Click to add tab"] }) })) : null] })) }));
+                    return ((0, jsx_runtime_1.jsx)(TabItem, { disabled: disabled, variant: variant, tabId: tabId, tabIndex: tabIndex, tabs: tabs, onTabsChange: onTabsChange, tab: tab, onRemove: () => onRemoveTab(tabIndex), onRemoveToolbar: (toolbarIndex) => onRemoveToolbar(tabIndex, toolbarIndex), onChangeTabName: (tabName) => onChangeTabName(tabIndex, tabName) }, tabIndex));
+                }), !disabled && onNewTab ? (isRows ? ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { alignItems: "center", className: "twa:gap-2 twa:rounded-standard twa:border twa:border-dashed twa:cursor-pointer twa:px-3 twa:py-2 twa:text-sm twa:italic twa:hover:bg-primarylight", onClick: onNewTab, children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "plus", size: 16 }), "Add tab"] })) : ((0, jsx_runtime_1.jsx)(Flex_1.Flex, { alignItems: "center", justifyContent: "center", className: "ab-ModuleSelector__TabItem twa:min-w-32 twa:border-dashed twa:cursor-pointer twa:bg-primarylight twa:text-primary-foreground twa:hover:bg-primary", onClick: onNewTab, children: (0, jsx_runtime_1.jsxs)("div", { className: "twa:text-8 twa:flex twa:flex-col twa:gap-4 twa:items-center twa:italic", children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "plus", size: 32 }), "Click to add tab"] }) }))) : null] })) }));
 }
-function TabItem({ tab, tabId, tabIndex, tabs, onTabsChange, onRemove, onRemoveToolbar, onChangeTabName, disabled, }) {
+function TabItem({ tab, tabId, tabIndex, tabs, onTabsChange, onRemove, onRemoveToolbar, onChangeTabName, disabled, variant = 'columns', }) {
     const context = React.useContext(DragAndDropContext_1.DragAndDropContext);
     const isDragDisabled = disabled || !context.permittedActions.dragAndDropTab;
-    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList.DraggableItem, { dragListId: "TABS", id: tabId, children: (itemDomProps) => {
+    const isRows = variant === 'rows';
+    const tabsListId = (0, dragScope_1.scopeListId)(context.dragScope, 'TABS');
+    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList.DraggableItem, { dragListId: tabsListId, id: (0, dragScope_1.scopeDragId)(context.dragScope, tabId), children: (itemDomProps) => {
             const { onPointerDown, ...restDomProps } = itemDomProps;
             let showHeader = true;
             if (tab.Name === '' &&
@@ -44,57 +52,63 @@ function TabItem({ tab, tabId, tabIndex, tabs, onTabsChange, onRemove, onRemoveT
                 !context.permittedActions.deleteTab) {
                 showHeader = false;
             }
-            return ((0, jsx_runtime_1.jsxs)("div", { ...restDomProps, className: (0, clsx_1.default)('twa:bg-background', 'twa:select-none', 'ab-ModuleSelector__TabItem twa:min-w-32', restDomProps.className), "data-name": "dashboard-tab", children: [showHeader ? ((0, jsx_runtime_1.jsxs)("div", { className: "ab-ModuleSelector__TabItem__header", children: [(0, jsx_runtime_1.jsx)("div", { ...(!isDragDisabled ? { onPointerDown } : {}), style: context.permittedActions.dragAndDropTab ? {} : { display: 'none' }, children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "drag" }) }), context.permittedActions.editTabName ? ((0, jsx_runtime_1.jsx)("input", { className: "ab-ModuleSelector__TabItem__header-input", type: "text", disabled: disabled, value: tab.Name, onChange: (event) => {
+            return ((0, jsx_runtime_1.jsxs)("div", { ...restDomProps, className: (0, utils_1.cn)('twa:bg-background', 'twa:select-none', 'ab-ModuleSelector__TabItem', isRows ? 'ab-ModuleSelector__TabItem--row' : 'twa:min-w-32', restDomProps.className), "data-name": "dashboard-tab", children: [showHeader ? ((0, jsx_runtime_1.jsxs)("div", { className: (0, utils_1.cn)('ab-ModuleSelector__TabItem__header', isRows && 'ab-ModuleSelector__TabItem__header--row'), children: [(0, jsx_runtime_1.jsx)("div", { ...(!isDragDisabled ? { onPointerDown } : {}), style: context.permittedActions.dragAndDropTab ? {} : { display: 'none' }, children: (0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "drag" }) }), context.permittedActions.editTabName ? ((0, jsx_runtime_1.jsx)("input", { className: "ab-ModuleSelector__TabItem__header-input", type: "text", disabled: disabled, value: tab.Name, placeholder: isRows ? 'Tab name' : undefined, onChange: (event) => {
                                     onChangeTabName(event.target.value);
-                                } })) : (tab.Name), context.permittedActions.deleteTab && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove }))] })) : null, (0, jsx_runtime_1.jsx)(ToolbarList, { disabled: disabled, toolbars: tab.Items, tabIndex: tabIndex, tabs: tabs, onTabsChange: onTabsChange, onRemove: onRemoveToolbar })] }));
+                                } })) : (tab.Name), context.permittedActions.deleteTab && ((0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove }))] })) : null, (0, jsx_runtime_1.jsx)(ToolbarList, { disabled: disabled, toolbars: tab.Items, tabIndex: tabIndex, tabs: tabs, onTabsChange: onTabsChange, onRemove: onRemoveToolbar, compact: isRows, embedded: isRows, orientation: isRows ? 'horizontal' : 'vertical' })] }));
         } }));
 }
-function ToolbarList({ toolbars, tabIndex, tabs, onTabsChange, onRemove, disabled, }) {
+function ToolbarList({ toolbars, tabIndex, tabs, onTabsChange, onRemove, disabled, orientation = 'vertical', compact = false, embedded = false, }) {
+    const { dragScope, unusedListIds } = React.useContext(DragAndDropContext_1.DragAndDropContext);
+    const listId = String(tabIndex);
+    const scopedListId = (0, dragScope_1.scopeListId)(dragScope, listId);
     const acceptDropsFrom = React.useMemo(() => {
-        const sources = ['UNUSED'];
+        const sources = unusedListIds.map((unusedListId) => (0, dragScope_1.scopeListId)(dragScope, unusedListId));
         tabs.forEach((_, i) => {
             if (i !== tabIndex)
-                sources.push(String(i));
+                sources.push((0, dragScope_1.scopeListId)(dragScope, String(i)));
         });
         return sources;
-    }, [tabIndex, tabs]);
-    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList, { dragListId: String(tabIndex), orientation: "vertical", acceptDropsFrom: [...acceptDropsFrom, String(tabIndex)], onDragProxyMove: dnd_1.defaultDragProxyMove, 
+    }, [dragScope, unusedListIds, tabIndex, tabs]);
+    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList, { dragListId: scopedListId, orientation: orientation, acceptDropsFrom: [...acceptDropsFrom, scopedListId], onDragProxyMove: dnd_1.defaultDragProxyMove, 
         // this is called when reordering inside the same list
         onDrop: (sortedIndexes) => {
             const newItems = sortedIndexes.map((i) => toolbars[i]);
             onTabsChange(tabs.map((t, i) => (i === tabIndex ? { ...t, Items: newItems } : t)));
         }, shouldAcceptDrop: ({ dragItem, dragSourceListId }) => {
-            const dragItemId = dragItem.id;
-            // if the tab contains an item with the same id, don't accept the drop
-            if (dragSourceListId != String(tabIndex) && tabs[tabIndex].Items.includes(dragItemId)) {
-                return false;
+            const toolbarId = (0, dragScope_1.unscopeDragId)(dragItem.id);
+            const sourceTabIndex = (0, dragScope_1.tabIndexFromScopedListId)(dragSourceListId);
+            if (sourceTabIndex === tabIndex) {
+                return true;
             }
-            return true;
+            return !toolbars.includes(toolbarId);
         }, 
         // this is called when dropping an item from a different list
-        onAcceptDrop: ({ dragItemId, dragSourceListId, dropIndex }) => {
-            const newTabs = tabs.map((tab, i) => {
-                let items = [...tab.Items];
-                if (dragSourceListId !== 'UNUSED' && i === Number(dragSourceListId)) {
-                    items = items.filter((item) => item !== dragItemId);
-                }
-                if (i === tabIndex) {
-                    items.splice(dropIndex, 0, dragItemId);
+        onAcceptDrop: ({ dragItemId, dropIndex }) => {
+            const toolbarId = (0, dragScope_1.unscopeDragId)(dragItemId);
+            onTabsChange(tabs.map((tab, i) => {
+                if (i !== tabIndex || tab.Items.includes(toolbarId)) {
+                    return tab;
                 }
+                const items = [...tab.Items];
+                items.splice(Math.min(dropIndex, items.length), 0, toolbarId);
                 return { ...tab, Items: items };
-            });
-            onTabsChange(newTabs);
-        }, children: (listDomProps, context) => ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { ...listDomProps, className: (0, clsx_1.default)('ab-ModuleSelector__ToolbarList', listDomProps.className, {
-                'twa:bg-(--ab-dashboard-tab-drop-target__background) ab-ModuleSelector__ToolbarList--accent-drop': context.dropTargetListId === String(tabIndex) && context.status === 'accepted',
-                'twa:bg-error/30 ab-ModuleSelector__ToolbarList--reject-drop': context.dropTargetListId === String(tabIndex) && context.status === 'rejected',
-            }), "data-name": "dashboard-toolbar-drop-target", children: [toolbars?.map((toolbar, toolbarIndex) => ((0, jsx_runtime_1.jsx)(ToolbarItem, { disabled: disabled, toolbar: toolbar, onRemove: () => onRemove(toolbarIndex) }, toolbar))), toolbars.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "ab-ModuleSelector__ToolbarList__placeholder twa:flex twa:items-center twa:justify-center twa:h-full twa:italic twa:text-center", children: "Drag and drop toolbar here" })) : null] })) }));
+            }));
+        }, children: (listDomProps, context) => ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { ...listDomProps, className: (0, utils_1.cn)('ab-ModuleSelector__ToolbarList', listDomProps.className, {
+                'ab-ModuleSelector__ToolbarList--compact': compact,
+                'ab-ModuleSelector__ToolbarList--embedded': embedded,
+                'ab-ModuleSelector__ToolbarList--horizontal': orientation === 'horizontal',
+                'twa:bg-(--ab-dashboard-tab-drop-target__background) ab-ModuleSelector__ToolbarList--accent-drop': context.dropTargetListId === scopedListId && context.status === 'accepted',
+                'twa:bg-error/30 ab-ModuleSelector__ToolbarList--reject-drop': context.dropTargetListId === scopedListId && context.status === 'rejected',
+            }), "data-name": "dashboard-toolbar-drop-target", children: [toolbars?.map((toolbar, toolbarIndex) => ((0, jsx_runtime_1.jsx)(ToolbarItem, { disabled: disabled, compact: compact, toolbar: toolbar, onRemove: () => onRemove(toolbarIndex) }, toolbar))), toolbars.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: (0, utils_1.cn)('ab-ModuleSelector__ToolbarList__placeholder twa:italic twa:text-center', compact
+                        ? 'twa:flex twa:items-center twa:min-h-[2.5rem] twa:px-2 twa:text-sm'
+                        : 'twa:flex twa:items-center twa:justify-center twa:h-full'), children: "Drag and drop toolbar here" })) : null] })) }));
 }
-function ToolbarItem({ toolbar, onRemove, disabled, }) {
-    const { availableItems } = React.useContext(DragAndDropContext_1.DragAndDropContext);
+function ToolbarItem({ toolbar, onRemove, disabled, compact = false, }) {
+    const { availableItems, dragScope } = React.useContext(DragAndDropContext_1.DragAndDropContext);
     const currentItem = availableItems.find((t) => t.Id === toolbar);
     const title = currentItem ? currentItem.Title : toolbar;
-    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList.DraggableItem, { id: toolbar, children: (itemDomProps) => {
+    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList.DraggableItem, { id: (0, dragScope_1.scopeDragId)(dragScope, toolbar), children: (itemDomProps) => {
             const { onPointerDown, ...restDomProps } = itemDomProps;
-            return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: (0, clsx_1.default)('ab-ModuleSelector__ToolbarItem twa:mb-1 twa:pl-1 twa:text-3', 'twa:bg-primarylight', restDomProps.className), alignItems: "center", children: [(0, jsx_runtime_1.jsx)("div", { className: "twa:flex-1", children: title }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: disabled, icon: "close", variant: "text", className: "twa:p-1", onClick: onRemove })] }));
+            return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: (0, utils_1.cn)('ab-ModuleSelector__ToolbarItem ab-ModuleSelector__DraggableChip twa:text-3 twa:rounded-standard twa:gap-1', compact ? 'twa:px-2 twa:py-1 twa:shrink-0' : 'twa:mb-1 twa:pl-1 twa:pr-0', restDomProps.className), alignItems: "center", children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "drag", className: "twa:shrink-0 twa:opacity-60", size: 14 }), (0, jsx_runtime_1.jsx)("div", { className: "twa:flex-1 twa:min-w-0", children: title }), (0, jsx_runtime_1.jsx)(SimpleButton_1.default, { disabled: disabled, icon: "close", variant: "text", className: "twa:p-1", onClick: onRemove })] }));
         } }));
 }

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
-export declare function UnusedPanel({ items, disabled, title, dragItemText, }: {
-    title: string;
+export declare function UnusedPanel({ items, disabled, title, dragItemText, listId, }: {
+    title?: string;
     items: string[];
     disabled: boolean;
-    dragItemText: string;
+    dragItemText?: string;
+    listId?: string;
 }): React.JSX.Element;

package/src/components/DragAndDropContext/UnusedPanel.js

@@ -6,23 +6,27 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const React = tslib_1.__importStar(require("react"));
 const dnd_1 = require("../dnd");
 const DragAndDropContext_1 = require("./DragAndDropContext");
+const dragScope_1 = require("./dragScope");
 const Flex_1 = require("../Flex");
-const clsx_1 = tslib_1.__importDefault(require("clsx"));
-function UnusedPanel({ items, disabled, title, dragItemText, }) {
-    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-ModuleSelector__UnusedPanel twa:mb-2 twa:pb-1", "data-name": "unusedpanel-items", children: [(0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)("b", { children: title }), " (", dragItemText, ")"] }), (0, jsx_runtime_1.jsx)(UnusedItemList, { disabled: disabled, items: items })] }));
+const icons_1 = require("../icons");
+const utils_1 = require("../../lib/utils");
+function UnusedPanel({ items, disabled, title, dragItemText, listId = 'UNUSED', }) {
+    const showHeader = Boolean(title);
+    return ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "ab-ModuleSelector__UnusedPanel twa:mb-2 twa:pb-1", "data-name": "unusedpanel-items", children: [showHeader ? ((0, jsx_runtime_1.jsxs)(Flex_1.Box, { className: "twa:p-2", children: [(0, jsx_runtime_1.jsx)("b", { children: title }), dragItemText ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [" (", dragItemText, ")"] }) : null] })) : null, (0, jsx_runtime_1.jsx)(UnusedItemList, { disabled: disabled, items: items, listId: listId })] }));
 }
 const EMPTY_ARRAY = [];
-function UnusedItemList({ items, disabled }) {
-    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList, { dragStrategy: "proxy", preserveDragSpace: true, dragListId: "UNUSED", orientation: "horizontal", onDragProxyMove: dnd_1.defaultDragProxyMove, acceptDropsFrom: EMPTY_ARRAY, onDragProxySetup: ({ proxyElement }) => {
+function UnusedItemList({ items, disabled, listId = 'UNUSED', }) {
+    const { dragScope } = React.useContext(DragAndDropContext_1.DragAndDropContext);
+    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList, { dragStrategy: "proxy", preserveDragSpace: true, dragListId: (0, dragScope_1.scopeListId)(dragScope, listId), orientation: "horizontal", onDragProxyMove: dnd_1.defaultDragProxyMove, acceptDropsFrom: EMPTY_ARRAY, onDragProxySetup: ({ proxyElement }) => {
             proxyElement.classList.add('twa:shadow-md');
-        }, onDrop: () => { }, children: (listDomProps) => ((0, jsx_runtime_1.jsx)("div", { ...listDomProps, "data-name": "unusedpanel-items-list", className: (0, clsx_1.default)('twa:px-2 twa:flex-wrap twa:flex twa:flex-row twa:gap-1', listDomProps.className), children: items.map((unusedItem) => ((0, jsx_runtime_1.jsx)(UnusedItem, { disabled: disabled, unusedItem: unusedItem }, unusedItem))) })) }));
+        }, onDrop: () => { }, children: (listDomProps) => ((0, jsx_runtime_1.jsx)("div", { ...listDomProps, "data-name": "unusedpanel-items-list", className: (0, utils_1.cn)('twa:px-2 twa:flex-wrap twa:flex twa:flex-row twa:gap-1', listDomProps.className), children: items.map((unusedItem) => ((0, jsx_runtime_1.jsx)(UnusedItem, { disabled: disabled, unusedItem: unusedItem }, unusedItem))) })) }));
 }
 function UnusedItem({ unusedItem, disabled }) {
-    const { availableItems } = React.useContext(DragAndDropContext_1.DragAndDropContext);
+    const { availableItems, dragScope } = React.useContext(DragAndDropContext_1.DragAndDropContext);
     const currentItem = availableItems.find((t) => t.Id === unusedItem);
     const title = currentItem ? currentItem.Title : unusedItem;
-    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList.DraggableItem, { id: unusedItem, children: (itemDomProps) => {
+    return ((0, jsx_runtime_1.jsx)(dnd_1.DragList.DraggableItem, { id: (0, dragScope_1.scopeDragId)(dragScope, unusedItem), children: (itemDomProps) => {
             const { onPointerDown, ...restDomProps } = itemDomProps;
-            return ((0, jsx_runtime_1.jsx)("div", { "data-name": "unused-item", ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: (0, clsx_1.default)('twa:rounded-md twa:text-sm twa:text-primary-foreground twa:p-2 twa:select-none', 'twa:bg-primary', restDomProps.className), children: title }));
+            return ((0, jsx_runtime_1.jsxs)(Flex_1.Flex, { "data-name": "unused-item", alignItems: "center", ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: (0, utils_1.cn)('ab-ModuleSelector__DraggableChip twa:rounded-standard twa:text-sm twa:px-2 twa:py-1 twa:select-none twa:gap-1', restDomProps.className), children: [(0, jsx_runtime_1.jsx)(icons_1.Icon, { name: "drag", className: "twa:shrink-0 twa:opacity-60", size: 14 }), (0, jsx_runtime_1.jsx)("span", { children: title })] }));
         } }));
 }

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

@@ -0,0 +1,6 @@
+export declare function scopeDragId(dragScope: string, id: string): string;
+export declare function unscopeDragId(scopedId: string): string;
+export declare function scopeListId(dragScope: string, listId: string): string;
+export declare function unscopeListId(scopedListId: string): string;
+export declare function tabIndexFromScopedListId(scopedListId: string): number | null;
+export declare function isScopedUnusedList(scopedListId: string): boolean;

package/src/components/DragAndDropContext/dragScope.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.scopeDragId = scopeDragId;
+exports.unscopeDragId = unscopeDragId;
+exports.scopeListId = scopeListId;
+exports.unscopeListId = unscopeListId;
+exports.tabIndexFromScopedListId = tabIndexFromScopedListId;
+exports.isScopedUnusedList = isScopedUnusedList;
+const SCOPE_SEP = '::';
+function scopeDragId(dragScope, id) {
+    return `${dragScope}${SCOPE_SEP}${id}`;
+}
+function unscopeDragId(scopedId) {
+    const sep = scopedId.indexOf(SCOPE_SEP);
+    return sep === -1 ? scopedId : scopedId.slice(sep + SCOPE_SEP.length);
+}
+function scopeListId(dragScope, listId) {
+    return scopeDragId(dragScope, listId);
+}
+function unscopeListId(scopedListId) {
+    return unscopeDragId(scopedListId);
+}
+function tabIndexFromScopedListId(scopedListId) {
+    const listId = unscopeListId(scopedListId);
+    if (listId === 'UNUSED' || listId.startsWith('UNUSED-') || listId === 'TABS') {
+        return null;
+    }
+    const index = Number(listId);
+    return Number.isNaN(index) ? null : index;
+}
+function isScopedUnusedList(scopedListId) {
+    const listId = unscopeListId(scopedListId);
+    return listId === 'UNUSED' || listId.startsWith('UNUSED-');
+}

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

@@ -6,3 +6,10 @@ export interface ModuleDraggableItem {
     Id: string;
     Title: string;
 }
+export interface UnusedItemGroup {
+    /** Drag-list id suffix (scoped under `dragScope`). Defaults to `UNUSED-{index}`. */
+    listId?: string;
+    title: string;
+    help?: string;
+    items: string[];
+}

package/src/components/DropdownButton/index.d.ts

@@ -1,28 +1,36 @@
 import * as React from 'react';
+import { AccessLevel } from '../../AdaptableState/Common/Entitlement';
 import { SimpleButtonProps } from '../SimpleButton';
-import { ExpandedProps } from './useExpanded';
-import DropdownButtonItem from './DropdownButtonItem';
-import { OverlayTriggerProps } from '../OverlayTrigger';
-import { BoxProps } from '../Flex';
-export declare const DROPDOWN_ICON: React.JSX.Element;
-export type DropdownButtonProps = React.PropsWithChildren<Omit<BoxProps, 'ref'>> & Omit<React.HTMLProps<HTMLElement>, 'ref'> & SimpleButtonProps & ExpandedProps & {
-    collapseOnItemClick?: boolean;
-    columns?: string[];
-    overlayProps?: OverlayTriggerProps;
-    listOffset?: number;
-    items?: DropdownButtonItem[];
-    stopPropagationOnOverlay?: boolean;
-    idProperty?: string;
-    showClearButton?: boolean;
-    focusOnClear?: boolean;
-    onClear?: () => void;
-    clearButtonProps?: SimpleButtonProps;
-    listItemClassName?: string;
-    listStyle?: React.CSSProperties;
-    listMinWidth?: number;
-    listItemStyle?: React.CSSProperties | ((item: DropdownButtonItem, index: number) => React.CSSProperties);
-    isItemDisabled?: (item: DropdownButtonItem) => boolean | undefined;
-    showToggleIcon?: boolean;
+export type NewDropdownButtonItem = {
+    label?: React.ReactNode;
+    tooltip?: string;
+    onClick?: (e?: React.SyntheticEvent) => void;
+    disabled?: boolean;
+    dataName?: string;
+    separator?: boolean;
+    icon?: React.ReactNode;
+    /** When `false`, the menu stays open after this item is clicked (default `true`). */
+    closeOnClick?: boolean;
 };
-declare const DropdownButton: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<DropdownButtonProps>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export default DropdownButton;
+export type NewDropdownButtonProps = {
+    items: NewDropdownButtonItem[];
+    children?: React.ReactNode;
+    className?: string;
+    disabled?: boolean;
+    tooltip?: string;
+    variant?: SimpleButtonProps['variant'];
+    size?: SimpleButtonProps['size'];
+    accessLevel?: AccessLevel;
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    align?: 'start' | 'center' | 'end';
+    'data-name'?: string;
+    tone?: SimpleButtonProps['tone'];
+    showDivider?: boolean;
+    id?: string;
+    'data-id'?: string;
+    'data-value'?: string | number;
+    'aria-label'?: string;
+    onMouseDown?: React.MouseEventHandler;
+    extraWidthChars?: number;
+};
+export declare const NewDropdownButton: React.ForwardRefExoticComponent<NewDropdownButtonProps & React.RefAttributes<HTMLButtonElement>>;