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

package/src/components/DragAndDropContext/ModuleManager.js

@@ -1,14 +1,20 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import * as React from 'react';
 import { DragDropProvider } from '../dnd';
-import { DragAndDropContext } from './DragAndDropContext';
-import { TabList } from './TabList';
+import { DragAndDropContext, DEFAULT_UNUSED_LIST_ID } from './DragAndDropContext';
+import { TabList, ToolbarList } from './TabList';
 import { UnusedPanel } from './UnusedPanel';
-import { Flex } from '../Flex';
-import clsx from 'clsx';
+import { Box, Flex } from '../Flex';
 import { Card } from '../Card';
+import { cn } from '../../lib/utils';
 export 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 [DEFAULT_UNUSED_LIST_ID];
+    }, [unusedItemGroups]);
     const contextValue = React.useMemo(() => {
         const preparedPermittedAction = {
             createTab: true,
@@ -20,8 +26,10 @@ export 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) {
@@ -57,5 +65,36 @@ export const ModuleManager = (props) => {
             };
         }));
     };
-    return (_jsx(DragDropProvider, { children: _jsx(DragAndDropContext.Provider, { value: contextValue, children: _jsxs(Flex, { flexDirection: "column", className: clsx('ab-ModuleSelector twa:flex-1', className), children: [_jsx(UnusedPanel, { title: unusedPanelTitle, disabled: disabled, items: allowedItems, dragItemText: dragItemText }), _jsxs(Card, { className: "twa:flex-1 twa:m-2 ab-ModuleSelector-UsedPanel", children: [_jsx(Card.Title, { border: false, children: tabsTitle }), _jsx(Card.Body, { className: "twa:px-2", children: _jsx(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 (_jsxs(_Fragment, { children: [dragItemText ? (_jsx(Box, { className: "twa:pb-2 twa:text-sm twa:opacity-80", children: dragItemText })) : null, _jsx(Flex, { flexDirection: groupsLayout === 'row' ? 'row' : 'column', className: 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 (_jsxs(Card, { className: cn('twa:m-0 ab-ModuleSelector__UnusedGroup', {
+                                'twa:flex-1 twa:min-w-0': groupsLayout === 'row',
+                            }), children: [_jsxs(Card.Title, { border: false, className: "twa:py-2", children: [_jsx(Box, { className: "twa:text-sm twa:font-medium", children: group.title }), group.help ? (_jsx(Box, { className: "twa:text-xs twa:opacity-70 twa:font-normal", children: group.help })) : null] }), _jsx(Card.Body, { className: "twa:px-0 twa:pt-0", children: _jsx(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 _jsx(Box, { className: "twa:px-2 twa:mb-2", children: content });
+        }
+        return (_jsx(UnusedPanel, { title: unusedPanelTitle, disabled: disabled, items: allowedItems, dragItemText: dragItemText }));
+    };
+    const renderUsedPanelCard = () => (_jsxs(Card, { className: "twa:m-0 ab-ModuleSelector-UsedPanel", children: [tabsTitle ? _jsx(Card.Title, { border: false, children: tabsTitle }) : null, _jsx(Card.Body, { className: "twa:px-2", children: _jsx(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 (_jsx(DragDropProvider, { children: _jsx(DragAndDropContext.Provider, { value: contextValue, children: _jsxs(Flex, { flexDirection: "column", className: cn('ab-ModuleSelector ab-ModuleSelector--strip', className), children: [_jsx(Box, { className: "twa:pb-1", children: renderAvailableItemPanels() }), _jsx(Box, { className: "twa:px-2 twa:pb-1", children: _jsx(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 (_jsx(DragDropProvider, { children: _jsx(DragAndDropContext.Provider, { value: contextValue, children: _jsx(Flex, { flexDirection: "column", className: cn('ab-ModuleSelector ab-ModuleSelector--rows', className), children: alignUsedPanelWithGroups ? (_jsxs(Box, { className: "twa:px-2 twa:flex twa:flex-col twa:gap-2", children: [renderAvailableItemPanels({ includeOuterPadding: false }), renderUsedPanelCard()] })) : (_jsxs(_Fragment, { children: [_jsx(Box, { className: "twa:pb-1", children: renderAvailableItemPanels() }), renderUsedPanelCard()] })) }) }) }));
+    }
+    return (_jsx(DragDropProvider, { children: _jsx(DragAndDropContext.Provider, { value: contextValue, children: _jsxs(Flex, { flexDirection: "column", className: cn('ab-ModuleSelector twa:flex-1', className), children: [renderAvailableItemPanels(), _jsxs(Card, { className: "twa:flex-1 twa:m-0 ab-ModuleSelector-UsedPanel", children: [tabsTitle ? _jsx(Card.Title, { border: false, children: tabsTitle }) : null, _jsx(Card.Body, { className: "twa:px-2", children: _jsx(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,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

@@ -4,9 +4,13 @@ import { defaultDragProxyMove, DragList } from '../dnd';
 import { Icon } from '../icons';
 import SimpleButton from '../SimpleButton';
 import { DragAndDropContext } from './DragAndDropContext';
+import { scopeDragId, scopeListId, tabIndexFromScopedListId, unscopeDragId } from './dragScope';
 import { Box, Flex } from '../Flex';
-import clsx from 'clsx';
-export function TabList({ tabs, onTabsChange, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, onNewTab, }) {
+import { cn } from '../../lib/utils';
+export function TabList({ tabs, onTabsChange, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, onNewTab, variant = 'columns', }) {
+    const isRows = variant === 'rows';
+    const { dragScope } = React.useContext(DragAndDropContext);
+    const tabsListId = scopeListId(dragScope, 'TABS');
     const tabIdsRef = React.useRef(new WeakMap());
     const nextTabIdRef = React.useRef(0);
     const getTabStableId = React.useCallback((tab) => {
@@ -18,18 +22,22 @@ export function TabList({ tabs, onTabsChange, onRemoveTab, onRemoveToolbar, onCh
         tabIdsRef.current.set(tab, newId);
         return newId;
     }, []);
-    return (_jsx(DragList, { dragListId: "TABS", orientation: "horizontal", dragStrategy: "proxy", preserveDragSpace: true, onDragProxyMove: defaultDragProxyMove, onDrop: (sortedIndexes) => {
+    return (_jsx(DragList, { dragListId: tabsListId, orientation: isRows ? 'vertical' : 'horizontal', dragStrategy: "proxy", preserveDragSpace: true, onDragProxyMove: defaultDragProxyMove, onDrop: (sortedIndexes) => {
             const newTabs = sortedIndexes.map((i) => tabs[i]);
             onTabsChange(newTabs);
-        }, children: (listDomProps) => (_jsxs("div", { ...listDomProps, className: clsx('ab-ModuleSelector__TabList twa:flex twa:flex-1 twa:overflow-auto', listDomProps.className), "data-name": "dashboard-tabs", children: [tabs.map((tab, tabIndex) => {
+        }, children: (listDomProps) => (_jsxs("div", { ...listDomProps, className: 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 (_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 ? (_jsx(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: _jsxs("div", { className: "twa:text-8 twa:flex twa:flex-col twa:gap-4 twa:items-center twa:italic", children: [_jsx(Icon, { name: "plus", size: 32 }), "Click to add tab"] }) })) : null] })) }));
+                    return (_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 ? (_jsxs(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: [_jsx(Icon, { name: "plus", size: 16 }), "Add tab"] })) : (_jsx(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: _jsxs("div", { className: "twa:text-8 twa:flex twa:flex-col twa:gap-4 twa:items-center twa:italic", children: [_jsx(Icon, { name: "plus", size: 32 }), "Click to add tab"] }) }))) : null] })) }));
 }
-export function TabItem({ tab, tabId, tabIndex, tabs, onTabsChange, onRemove, onRemoveToolbar, onChangeTabName, disabled, }) {
+export function TabItem({ tab, tabId, tabIndex, tabs, onTabsChange, onRemove, onRemoveToolbar, onChangeTabName, disabled, variant = 'columns', }) {
     const context = React.useContext(DragAndDropContext);
     const isDragDisabled = disabled || !context.permittedActions.dragAndDropTab;
-    return (_jsx(DragList.DraggableItem, { dragListId: "TABS", id: tabId, children: (itemDomProps) => {
+    const isRows = variant === 'rows';
+    const tabsListId = scopeListId(context.dragScope, 'TABS');
+    return (_jsx(DragList.DraggableItem, { dragListId: tabsListId, id: scopeDragId(context.dragScope, tabId), children: (itemDomProps) => {
             const { onPointerDown, ...restDomProps } = itemDomProps;
             let showHeader = true;
             if (tab.Name === '' &&
@@ -37,57 +45,63 @@ export function TabItem({ tab, tabId, tabIndex, tabs, onTabsChange, onRemove, on
                 !context.permittedActions.deleteTab) {
                 showHeader = false;
             }
-            return (_jsxs("div", { ...restDomProps, className: clsx('twa:bg-background', 'twa:select-none', 'ab-ModuleSelector__TabItem twa:min-w-32', restDomProps.className), "data-name": "dashboard-tab", children: [showHeader ? (_jsxs("div", { className: "ab-ModuleSelector__TabItem__header", children: [_jsx("div", { ...(!isDragDisabled ? { onPointerDown } : {}), style: context.permittedActions.dragAndDropTab ? {} : { display: 'none' }, children: _jsx(Icon, { name: "drag" }) }), context.permittedActions.editTabName ? (_jsx("input", { className: "ab-ModuleSelector__TabItem__header-input", type: "text", disabled: disabled, value: tab.Name, onChange: (event) => {
+            return (_jsxs("div", { ...restDomProps, className: 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 ? (_jsxs("div", { className: cn('ab-ModuleSelector__TabItem__header', isRows && 'ab-ModuleSelector__TabItem__header--row'), children: [_jsx("div", { ...(!isDragDisabled ? { onPointerDown } : {}), style: context.permittedActions.dragAndDropTab ? {} : { display: 'none' }, children: _jsx(Icon, { name: "drag" }) }), context.permittedActions.editTabName ? (_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 && (_jsx(SimpleButton, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove }))] })) : null, _jsx(ToolbarList, { disabled: disabled, toolbars: tab.Items, tabIndex: tabIndex, tabs: tabs, onTabsChange: onTabsChange, onRemove: onRemoveToolbar })] }));
+                                } })) : (tab.Name), context.permittedActions.deleteTab && (_jsx(SimpleButton, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove }))] })) : null, _jsx(ToolbarList, { disabled: disabled, toolbars: tab.Items, tabIndex: tabIndex, tabs: tabs, onTabsChange: onTabsChange, onRemove: onRemoveToolbar, compact: isRows, embedded: isRows, orientation: isRows ? 'horizontal' : 'vertical' })] }));
         } }));
 }
-export function ToolbarList({ toolbars, tabIndex, tabs, onTabsChange, onRemove, disabled, }) {
+export function ToolbarList({ toolbars, tabIndex, tabs, onTabsChange, onRemove, disabled, orientation = 'vertical', compact = false, embedded = false, }) {
+    const { dragScope, unusedListIds } = React.useContext(DragAndDropContext);
+    const listId = String(tabIndex);
+    const scopedListId = scopeListId(dragScope, listId);
     const acceptDropsFrom = React.useMemo(() => {
-        const sources = ['UNUSED'];
+        const sources = unusedListIds.map((unusedListId) => scopeListId(dragScope, unusedListId));
         tabs.forEach((_, i) => {
             if (i !== tabIndex)
-                sources.push(String(i));
+                sources.push(scopeListId(dragScope, String(i)));
         });
         return sources;
-    }, [tabIndex, tabs]);
-    return (_jsx(DragList, { dragListId: String(tabIndex), orientation: "vertical", acceptDropsFrom: [...acceptDropsFrom, String(tabIndex)], onDragProxyMove: defaultDragProxyMove, 
+    }, [dragScope, unusedListIds, tabIndex, tabs]);
+    return (_jsx(DragList, { dragListId: scopedListId, orientation: orientation, acceptDropsFrom: [...acceptDropsFrom, scopedListId], onDragProxyMove: 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 = unscopeDragId(dragItem.id);
+            const sourceTabIndex = 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 = 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) => (_jsxs(Box, { ...listDomProps, className: clsx('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) => (_jsx(ToolbarItem, { disabled: disabled, toolbar: toolbar, onRemove: () => onRemove(toolbarIndex) }, toolbar))), toolbars.length === 0 ? (_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) => (_jsxs(Box, { ...listDomProps, className: 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) => (_jsx(ToolbarItem, { disabled: disabled, compact: compact, toolbar: toolbar, onRemove: () => onRemove(toolbarIndex) }, toolbar))), toolbars.length === 0 ? (_jsx("div", { className: 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] })) }));
 }
-export function ToolbarItem({ toolbar, onRemove, disabled, }) {
-    const { availableItems } = React.useContext(DragAndDropContext);
+export function ToolbarItem({ toolbar, onRemove, disabled, compact = false, }) {
+    const { availableItems, dragScope } = React.useContext(DragAndDropContext);
     const currentItem = availableItems.find((t) => t.Id === toolbar);
     const title = currentItem ? currentItem.Title : toolbar;
-    return (_jsx(DragList.DraggableItem, { id: toolbar, children: (itemDomProps) => {
+    return (_jsx(DragList.DraggableItem, { id: scopeDragId(dragScope, toolbar), children: (itemDomProps) => {
             const { onPointerDown, ...restDomProps } = itemDomProps;
-            return (_jsxs(Flex, { ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: clsx('ab-ModuleSelector__ToolbarItem twa:mb-1 twa:pl-1 twa:text-3', 'twa:bg-primarylight', restDomProps.className), alignItems: "center", children: [_jsx("div", { className: "twa:flex-1", children: title }), _jsx(SimpleButton, { disabled: disabled, icon: "close", variant: "text", className: "twa:p-1", onClick: onRemove })] }));
+            return (_jsxs(Flex, { ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: 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: [_jsx(Icon, { name: "drag", className: "twa:shrink-0 twa:opacity-60", size: 14 }), _jsx("div", { className: "twa:flex-1 twa:min-w-0", children: title }), _jsx(SimpleButton, { 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

@@ -1,24 +1,28 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { defaultDragProxyMove, DragList } from '../dnd';
 import { DragAndDropContext } from './DragAndDropContext';
-import { Box } from '../Flex';
-import clsx from 'clsx';
-export function UnusedPanel({ items, disabled, title, dragItemText, }) {
-    return (_jsxs(Box, { className: "ab-ModuleSelector__UnusedPanel twa:mb-2 twa:pb-1", "data-name": "unusedpanel-items", children: [_jsxs(Box, { className: "twa:p-2", children: [_jsx("b", { children: title }), " (", dragItemText, ")"] }), _jsx(UnusedItemList, { disabled: disabled, items: items })] }));
+import { scopeDragId, scopeListId } from './dragScope';
+import { Box, Flex } from '../Flex';
+import { Icon } from '../icons';
+import { cn } from '../../lib/utils';
+export function UnusedPanel({ items, disabled, title, dragItemText, listId = 'UNUSED', }) {
+    const showHeader = Boolean(title);
+    return (_jsxs(Box, { className: "ab-ModuleSelector__UnusedPanel twa:mb-2 twa:pb-1", "data-name": "unusedpanel-items", children: [showHeader ? (_jsxs(Box, { className: "twa:p-2", children: [_jsx("b", { children: title }), dragItemText ? _jsxs(_Fragment, { children: [" (", dragItemText, ")"] }) : null] })) : null, _jsx(UnusedItemList, { disabled: disabled, items: items, listId: listId })] }));
 }
 const EMPTY_ARRAY = [];
-function UnusedItemList({ items, disabled }) {
-    return (_jsx(DragList, { dragStrategy: "proxy", preserveDragSpace: true, dragListId: "UNUSED", orientation: "horizontal", onDragProxyMove: defaultDragProxyMove, acceptDropsFrom: EMPTY_ARRAY, onDragProxySetup: ({ proxyElement }) => {
+function UnusedItemList({ items, disabled, listId = 'UNUSED', }) {
+    const { dragScope } = React.useContext(DragAndDropContext);
+    return (_jsx(DragList, { dragStrategy: "proxy", preserveDragSpace: true, dragListId: scopeListId(dragScope, listId), orientation: "horizontal", onDragProxyMove: defaultDragProxyMove, acceptDropsFrom: EMPTY_ARRAY, onDragProxySetup: ({ proxyElement }) => {
             proxyElement.classList.add('twa:shadow-md');
-        }, onDrop: () => { }, children: (listDomProps) => (_jsx("div", { ...listDomProps, "data-name": "unusedpanel-items-list", className: clsx('twa:px-2 twa:flex-wrap twa:flex twa:flex-row twa:gap-1', listDomProps.className), children: items.map((unusedItem) => (_jsx(UnusedItem, { disabled: disabled, unusedItem: unusedItem }, unusedItem))) })) }));
+        }, onDrop: () => { }, children: (listDomProps) => (_jsx("div", { ...listDomProps, "data-name": "unusedpanel-items-list", className: cn('twa:px-2 twa:flex-wrap twa:flex twa:flex-row twa:gap-1', listDomProps.className), children: items.map((unusedItem) => (_jsx(UnusedItem, { disabled: disabled, unusedItem: unusedItem }, unusedItem))) })) }));
 }
 function UnusedItem({ unusedItem, disabled }) {
-    const { availableItems } = React.useContext(DragAndDropContext);
+    const { availableItems, dragScope } = React.useContext(DragAndDropContext);
     const currentItem = availableItems.find((t) => t.Id === unusedItem);
     const title = currentItem ? currentItem.Title : unusedItem;
-    return (_jsx(DragList.DraggableItem, { id: unusedItem, children: (itemDomProps) => {
+    return (_jsx(DragList.DraggableItem, { id: scopeDragId(dragScope, unusedItem), children: (itemDomProps) => {
             const { onPointerDown, ...restDomProps } = itemDomProps;
-            return (_jsx("div", { "data-name": "unused-item", ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: clsx('twa:rounded-md twa:text-sm twa:text-primary-foreground twa:p-2 twa:select-none', 'twa:bg-primary', restDomProps.className), children: title }));
+            return (_jsxs(Flex, { "data-name": "unused-item", alignItems: "center", ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: 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: [_jsx(Icon, { name: "drag", className: "twa:shrink-0 twa:opacity-60", size: 14 }), _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,26 @@
+const SCOPE_SEP = '::';
+export function scopeDragId(dragScope, id) {
+    return `${dragScope}${SCOPE_SEP}${id}`;
+}
+export function unscopeDragId(scopedId) {
+    const sep = scopedId.indexOf(SCOPE_SEP);
+    return sep === -1 ? scopedId : scopedId.slice(sep + SCOPE_SEP.length);
+}
+export function scopeListId(dragScope, listId) {
+    return scopeDragId(dragScope, listId);
+}
+export function unscopeListId(scopedListId) {
+    return unscopeDragId(scopedListId);
+}
+export 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;
+}
+export 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>>;