@adaptabletools/adaptable 22.0.11 → 22.1.0-canary.1

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;

package/src/components/DragAndDropContext/TabList.js

@@ -1,65 +1,107 @@
 import * as React from 'react';
-import { Draggable, Droppable } from '../dnd';
+import { defaultDragProxyMove, DragList } from '../dnd';
 import { Icon } from '../icons';
 import SimpleButton from '../SimpleButton';
 import { DragAndDropContext } from './DragAndDropContext';
 import { Box, Flex } from '../Flex';
-export function TabList({ tabs, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, onNewTab, }) {
-    return (React.createElement(Droppable, { droppableId: "MAIN", type: "TAB", direction: "horizontal" }, (provided) => (React.createElement("div", { ...provided.droppableProps, className: "ab-ModuleSelector__TabList twa:flex twa:flex-1 twa:overflow-auto", ref: provided.innerRef, "data-name": "dashboard-tabs" },
-        tabs.map((tab, tabIndex) => (React.createElement(TabItem, { disabled: disabled, key: tabIndex, tabIndex: tabIndex, tab: tab, onRemove: () => onRemoveTab(tabIndex), onRemoveToolbar: (toolbarIndex) => onRemoveToolbar(tabIndex, toolbarIndex), onChangeTabName: (tabName) => onChangeTabName(tabIndex, tabName) }))),
+import clsx from 'clsx';
+export function TabList({ tabs, onTabsChange, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, onNewTab, }) {
+    const tabIdsRef = React.useRef(new WeakMap());
+    const nextTabIdRef = React.useRef(0);
+    const getTabStableId = React.useCallback((tab) => {
+        const existingId = tabIdsRef.current.get(tab);
+        if (existingId) {
+            return existingId;
+        }
+        const newId = `dashboard-tab-${String(nextTabIdRef.current++)}`;
+        tabIdsRef.current.set(tab, newId);
+        return newId;
+    }, []);
+    return (React.createElement(DragList, { dragListId: "TABS", orientation: "horizontal", dragStrategy: "proxy", preserveDragSpace: true, onDragProxyMove: defaultDragProxyMove, onDrop: (sortedIndexes) => {
+            const newTabs = sortedIndexes.map((i) => tabs[i]);
+            onTabsChange(newTabs);
+        } }, (listDomProps) => (React.createElement("div", { ...listDomProps, className: clsx('ab-ModuleSelector__TabList twa:flex twa:flex-1 twa:overflow-auto', listDomProps.className), "data-name": "dashboard-tabs" },
+        tabs.map((tab, tabIndex) => {
+            const tabId = getTabStableId(tab);
+            return (React.createElement(TabItem, { disabled: disabled, key: tabIndex, tabId: tabId, tabIndex: tabIndex, tabs: tabs, onTabsChange: onTabsChange, tab: tab, onRemove: () => onRemoveTab(tabIndex), onRemoveToolbar: (toolbarIndex) => onRemoveToolbar(tabIndex, toolbarIndex), onChangeTabName: (tabName) => onChangeTabName(tabIndex, tabName) }));
+        }),
         !disabled && onNewTab ? (React.createElement(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 },
             React.createElement("div", { className: "twa:text-8 twa:flex twa:flex-col twa:gap-4 twa:items-center twa:italic" },
                 React.createElement(Icon, { name: "plus", size: 32 }),
-                "Click to add tab"))) : null,
-        provided.placeholder))));
+                "Click to add tab"))) : null))));
 }
-export function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onChangeTabName, disabled, }) {
+export function TabItem({ tab, tabId, tabIndex, tabs, onTabsChange, onRemove, onRemoveToolbar, onChangeTabName, disabled, }) {
     const context = React.useContext(DragAndDropContext);
     const isDragDisabled = disabled || !context.permittedActions.dragAndDropTab;
-    return (React.createElement(Draggable, { isDragDisabled: isDragDisabled, draggableId: String(tabIndex), index: tabIndex }, (provided) => {
+    return (React.createElement(DragList.DraggableItem, { dragListId: "TABS", id: tabId }, (itemDomProps) => {
+        const { onPointerDown, ...restDomProps } = itemDomProps;
         let showHeader = true;
         if (tab.Name === '' &&
             !context.permittedActions.editTabName &&
             !context.permittedActions.deleteTab) {
             showHeader = false;
         }
-        return (React.createElement("div", { className: "ab-ModuleSelector__TabItem twa:min-w-32", "data-name": "dashboard-tab", ref: provided.innerRef, ...provided.draggableProps, style: {
-                ...(isDragDisabled ? {} : provided.draggableProps.style),
-            } },
+        return (React.createElement("div", { ...restDomProps, className: clsx('twa:bg-defaultbackground', 'twa:select-none', 'ab-ModuleSelector__TabItem twa:min-w-32', restDomProps.className), "data-name": "dashboard-tab" },
             showHeader ? (React.createElement("div", { className: "ab-ModuleSelector__TabItem__header" },
-                React.createElement("div", { ...(disabled ? {} : provided.dragHandleProps), style: context.permittedActions.dragAndDropTab
-                        ? {}
-                        : {
-                            display: 'none',
-                        } },
+                React.createElement("div", { ...(!isDragDisabled ? { onPointerDown } : {}), style: context.permittedActions.dragAndDropTab ? {} : { display: 'none' } },
                     React.createElement(Icon, { name: "drag" })),
                 context.permittedActions.editTabName ? (React.createElement("input", { className: "ab-ModuleSelector__TabItem__header-input", type: "text", disabled: disabled, value: tab.Name, onChange: (event) => {
                         onChangeTabName(event.target.value);
                     } })) : (tab.Name),
                 context.permittedActions.deleteTab && (React.createElement(SimpleButton, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove })))) : null,
-            React.createElement(ToolbarList, { disabled: disabled, toolbars: tab.Items, droppableId: String(tabIndex), onRemove: onRemoveToolbar })));
+            React.createElement(ToolbarList, { disabled: disabled, toolbars: tab.Items, tabIndex: tabIndex, tabs: tabs, onTabsChange: onTabsChange, onRemove: onRemoveToolbar })));
     }));
 }
-export function ToolbarList({ toolbars, droppableId, onRemove, disabled, }) {
-    return (React.createElement(Droppable, { droppableId: droppableId, type: "TOOLBAR" }, (provided, snapshot) => (React.createElement(Box, { className: "ab-ModuleSelector__ToolbarList", ref: provided.innerRef, ...(disabled ? {} : provided.droppableProps), "data-name": "dashboard-toolbar-drop-target", style: {
-            backgroundColor: snapshot.isDraggingOver
-                ? 'var(--ab-dashboard-tab-drop-target__background)'
-                : '',
-        } },
-        toolbars?.map((toolbar, toolbarIndex) => (React.createElement(ToolbarItem, { disabled: disabled, key: toolbar, toolbar: toolbar, toolbarIndex: toolbarIndex, onRemove: () => onRemove(toolbarIndex) }))),
-        toolbars.length === 0 ? (React.createElement("div", { className: "ab-ModuleSelector__ToolbarList__placeholder twa:flex twa:items-center twa:justify-center twa:h-full twa:italic twa:text-center" }, "Drag and drop toolbar here")) : null,
-        provided.placeholder))));
+export function ToolbarList({ toolbars, tabIndex, tabs, onTabsChange, onRemove, disabled, }) {
+    const acceptDropsFrom = React.useMemo(() => {
+        const sources = ['UNUSED'];
+        tabs.forEach((_, i) => {
+            if (i !== tabIndex)
+                sources.push(String(i));
+        });
+        return sources;
+    }, [tabIndex, tabs]);
+    return (React.createElement(DragList, { dragListId: String(tabIndex), orientation: "vertical", acceptDropsFrom: [...acceptDropsFrom, String(tabIndex)], 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;
+            }
+            return true;
+        }, 
+        // 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);
+                }
+                return { ...tab, Items: items };
+            });
+            onTabsChange(newTabs);
+        } }, (listDomProps, context) => (React.createElement(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" },
+        toolbars?.map((toolbar, toolbarIndex) => (React.createElement(ToolbarItem, { disabled: disabled, key: toolbar, toolbar: toolbar, onRemove: () => onRemove(toolbarIndex) }))),
+        toolbars.length === 0 ? (React.createElement("div", { className: "ab-ModuleSelector__ToolbarList__placeholder twa:flex twa:items-center twa:justify-center twa:h-full twa:italic twa:text-center" }, "Drag and drop toolbar here")) : null))));
 }
-export function ToolbarItem({ toolbar, toolbarIndex, onRemove, disabled, }) {
+export function ToolbarItem({ toolbar, onRemove, disabled, }) {
     const { availableItems } = React.useContext(DragAndDropContext);
-    let currentItem = availableItems.find((t) => t.Id === toolbar);
+    const currentItem = availableItems.find((t) => t.Id === toolbar);
     const title = currentItem ? currentItem.Title : toolbar;
-    return (React.createElement(Draggable, { isDragDisabled: disabled, draggableId: toolbar, index: toolbarIndex }, (provided, snapshot) => (React.createElement(Flex, { className: `ab-ModuleSelector__ToolbarItem twa:mb-1 twa:pl-1`, alignItems: "center", ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: {
-            ...provided.draggableProps.style,
-            backgroundColor: snapshot.isDragging
-                ? 'var(--ab-dashboard-toolbar-drag__background)'
-                : 'var(--ab-color-primarylight)',
-        } },
-        React.createElement("div", { className: "twa:flex-1" }, title),
-        React.createElement(SimpleButton, { disabled: disabled, icon: "close", variant: "text", className: "twa:p-1", onClick: onRemove })))));
+    return (React.createElement(DragList.DraggableItem, { id: toolbar }, (itemDomProps) => {
+        const { onPointerDown, ...restDomProps } = itemDomProps;
+        return (React.createElement(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" },
+            React.createElement("div", { className: "twa:flex-1" }, title),
+            React.createElement(SimpleButton, { disabled: disabled, icon: "close", variant: "text", className: "twa:p-1", onClick: onRemove })));
+    }));
 }

package/src/components/DragAndDropContext/UnusedPanel.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Draggable, Droppable } from '../dnd';
+import { defaultDragProxyMove, DragList } from '../dnd';
 import { DragAndDropContext } from './DragAndDropContext';
 import { Box } from '../Flex';
 import clsx from 'clsx';
@@ -12,29 +12,18 @@ export function UnusedPanel({ items, disabled, title, dragItemText, }) {
             ")"),
         React.createElement(UnusedItemList, { disabled: disabled, items: items })));
 }
+const EMPTY_ARRAY = [];
 function UnusedItemList({ items, disabled }) {
-    return (React.createElement(Droppable, { droppableId: "UNUSED", type: "TOOLBAR", isDropDisabled: true, direction: "horizontal" }, (provided) => (React.createElement("div", { ref: provided.innerRef, "data-name": "unusedpanel-items-list", ...provided.droppableProps, className: 'twa:px-2 twa:flex-wrap twa:flex twa:flex-row twa:gap-1' },
-        items.map((unusedItem, unusedItemIndex) => (React.createElement(UnusedItem, { disabled: disabled, key: unusedItem, unusedItem: unusedItem, unusedItemIndex: unusedItemIndex }))),
-        provided.placeholder))));
+    return (React.createElement(DragList, { dragStrategy: "proxy", preserveDragSpace: true, dragListId: "UNUSED", orientation: "horizontal", onDragProxyMove: defaultDragProxyMove, acceptDropsFrom: EMPTY_ARRAY, onDragProxySetup: ({ proxyElement }) => {
+            proxyElement.classList.add('twa:shadow-md');
+        }, onDrop: () => { } }, (listDomProps) => (React.createElement("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) }, items.map((unusedItem) => (React.createElement(UnusedItem, { disabled: disabled, key: unusedItem, unusedItem: unusedItem })))))));
 }
-function UnusedItem({ unusedItem, unusedItemIndex, disabled, }) {
+function UnusedItem({ unusedItem, disabled }) {
     const { availableItems } = React.useContext(DragAndDropContext);
-    let currentItem = availableItems.find((t) => t.Id === unusedItem);
+    const currentItem = availableItems.find((t) => t.Id === unusedItem);
     const title = currentItem ? currentItem.Title : unusedItem;
-    return (React.createElement(Draggable, { isDragDisabled: disabled, draggableId: unusedItem, index: unusedItemIndex }, (provided, snapshot) => {
-        const eventHandlers = disabled
-            ? {}
-            : {
-                ...provided.draggableProps,
-                ...provided.dragHandleProps,
-            };
-        const dragStyle = disabled ? {} : provided.draggableProps.style;
-        return (React.createElement("div", { "data-name": "unused-item", ref: provided.innerRef, ...eventHandlers, className: clsx('twa:rounded-md twa:text-sm twa:text-text-on-primary twa:p-2'), style: {
-                ...dragStyle,
-                border: '1px solid var(--ab-color-primary)',
-                backgroundColor: snapshot.isDragging
-                    ? 'var(--ab-dashboard-toolbar-drag__background)'
-                    : 'var(--ab-color-primary)',
-            } }, title));
+    return (React.createElement(DragList.DraggableItem, { id: unusedItem }, (itemDomProps) => {
+        const { onPointerDown, ...restDomProps } = itemDomProps;
+        return (React.createElement("div", { "data-name": "unused-item", ...restDomProps, ...(disabled ? {} : { onPointerDown }), className: clsx('twa:rounded-md twa:text-sm twa:text-text-on-primary twa:p-2 twa:select-none', 'twa:bg-primary', restDomProps.className) }, title));
     }));
 }

package/src/components/ExpressionEditor/BaseEditorInput.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { ExpressionFunction, ExpressionFunctionMap } from '../../parser/src/types';
 import { AdaptableApi } from '../../Api/AdaptableApi';
 import { CSSProperties } from 'react';
+import { ColumnScope } from '../../types';
 interface BaseEditorInputProps {
     type: 'main' | 'secondary';
     value: string;
@@ -16,6 +17,7 @@ interface BaseEditorInputProps {
     hideResultPreview?: boolean;
     api: AdaptableApi;
     style?: CSSProperties;
+    columnScope?: ColumnScope;
 }
 export interface OperatorEditorButton {
     functionName: string;

package/src/components/ExpressionEditor/BaseEditorInput.js

@@ -202,6 +202,9 @@ export function BaseEditorInput(props) {
         // clone the class instance to still keep the prototype methods
         return Object.assign(Object.create(Object.getPrototypeOf(firstRowNode)), firstRowNode);
     }, []);
+    const scopeColumnId = useMemo(() => {
+        return props.api.columnScopeApi.getAnyColumnIdForScope(props.columnScope);
+    }, [props.columnScope]);
     try {
         // explicitly parsing & evaluating the expression because we need full control of the resulted AST
         const expr = parser.parse(props.value || '');
@@ -218,6 +221,7 @@ export function BaseEditorInput(props) {
                 functions: expressionFunctions,
                 evaluateCustomQueryVariable: props.api.internalApi.getQueryLanguageService().evaluateCustomQueryVariable,
                 dataChangedEvent,
+                columnScope: scopeColumnId,
                 ...props.api.internalApi.buildBaseContext(),
             });
         }

package/src/components/ExpressionEditor/EditorInput.d.ts

@@ -1,14 +1,16 @@
 import * as React from 'react';
 import { AdaptableApi } from '../../Api/AdaptableApi';
 import { AdaptableModule } from '../../AdaptableState/Common/Types';
+import { ColumnScope } from '../../AdaptableState/Common/ColumnScope';
 interface EditorInputProps {
     type: 'boolean' | 'scalar' | 'aggregatedScalar' | 'cumulativeAggregatedScalar' | 'quantileAggregatedScalar';
     module: AdaptableModule;
     value: string;
     onChange: (value: string) => void;
+    api: AdaptableApi;
     testData: any;
     isFullExpression?: boolean;
-    api: AdaptableApi;
+    columnScope?: ColumnScope;
 }
 declare function EditorInput(props: EditorInputProps): React.JSX.Element;
 export default EditorInput;

package/src/components/ExpressionEditor/EditorInput.js

@@ -38,15 +38,26 @@ function EditorInput(props) {
         }, {});
     };
     const expressionFunctions = useMemo(() => {
-        return props.type === 'aggregatedScalar' ||
+        if (props.type === 'aggregatedScalar' ||
             props.type === 'cumulativeAggregatedScalar' ||
-            props.type === 'quantileAggregatedScalar'
-            ? getFilteredAggregatedExpressionFunctions(moduleExpressionFunctions.aggregatedScalarFunctions, props.type)
-            : {
-                ...moduleExpressionFunctions.booleanFunctions,
-                ...moduleExpressionFunctions.scalarFunctions,
-            };
-    }, [props.type]);
+            props.type === 'quantileAggregatedScalar') {
+            return getFilteredAggregatedExpressionFunctions(moduleExpressionFunctions.aggregatedScalarFunctions, props.type);
+        }
+        let booleanAndScalarFunctions = {
+            ...moduleExpressionFunctions.booleanFunctions,
+            ...moduleExpressionFunctions.scalarFunctions,
+        };
+        if (!props.columnScope) {
+            // filter out $SCOPE function if no columnScope is provided
+            booleanAndScalarFunctions = Object.keys(booleanAndScalarFunctions)
+                .filter((key) => key !== '$SCOPE')
+                .reduce((obj, key) => {
+                obj[key] = booleanAndScalarFunctions[key];
+                return obj;
+            }, {});
+        }
+        return booleanAndScalarFunctions;
+    }, [props.type, props.columnScope]);
     const { setSelectedFunction } = useExpressionEditor();
     let queryName;
     switch (props.type) {
@@ -74,6 +85,6 @@ function EditorInput(props) {
                     ? editorButtonsQuantileAggregatedScalar
                     : editorButtonsSearch, testData: props.testData, isFullExpression: props.isFullExpression, hideResultPreview: props.type === 'aggregatedScalar' ||
             props.type === 'cumulativeAggregatedScalar' ||
-            props.type === 'quantileAggregatedScalar', api: props.api }));
+            props.type === 'quantileAggregatedScalar', api: props.api, columnScope: props.columnScope }));
 }
 export default EditorInput;

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilder.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AdaptableColumnDataType, AdaptableModule, BooleanFunctionName } from '../../../types';
+import { AdaptableColumnDataType, AdaptableModule, BooleanFunctionName, ColumnScope } from '../../../types';
 interface QueryBuilderProps {
     query: string;
     getColumns: (type?: AdaptableColumnDataType) => {
@@ -14,6 +14,7 @@ interface QueryBuilderProps {
     }[];
     onChange: (query: string) => void;
     module: AdaptableModule;
+    columnScope?: ColumnScope;
 }
 export declare function useQueryBuilderContext(): {
     getColumns: QueryBuilderProps["getColumns"];

package/src/components/ExpressionEditor/QueryBuilder/QueryBuilder.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { DragDropContext } from '../../dnd';
+import { DragDropProvider } from '../../dnd';
 import { mapExpressionToQlPredicate, } from '../../../parser/src/predicate';
 import { mapQlPredicateToExpression } from '../../../parser/src/predicate/mapQlPredicateToExpression';
 import { useAdaptable } from '../../../View/AdaptableContext';
@@ -9,7 +9,7 @@ import Panel from '../../Panel';
 import SimpleButton from '../../SimpleButton';
 import { WarningBox } from '../../WarningBox';
 import { QueryPredicateBuilder } from './QueryPredicateBuilder';
-import { getFunctionsForColumnType, getUnsuportedExpressionFromQlPredicate, reorder, } from './utils';
+import { getFunctionsForColumnType, getUnsuportedExpressionFromQlPredicate } from './utils';
 import { Box, Flex } from '../../Flex';
 const QUERY_BUILDER_CLASSNAME = 'ab-QueryBuilder';
 const QueryBuilderContext = React.createContext(null);
@@ -86,7 +86,6 @@ export const QueryBuilder = (props) => {
     }
     else if (qlPredicate && !('errorMessage' in qlPredicate)) {
         errorOrEditor = (React.createElement(QueryPredicateBuilder, { isRoot: true, index: 0, id: "0", predicate: qlPredicate, onNewPredicate: (type) => {
-                // add to its children
                 const newPredicate = {
                     operator: type === 'filter' ? undefined : 'AND',
                     args: [],
@@ -99,15 +98,7 @@ export const QueryBuilder = (props) => {
                 handleQlPredicateChange(predicate);
             } }));
     }
-    return (React.createElement(DragDropContext, { onDragEnd: (result) => {
-            if (!result.destination) {
-                return;
-            }
-            const toPath = `${result.destination.droppableId}/${result.destination.index}`;
-            const fromPath = result.draggableId;
-            const predicate = reorder(qlPredicate, fromPath, toPath);
-            handleQlPredicateChange(predicate);
-        } },
+    return (React.createElement(DragDropProvider, null,
         React.createElement(QueryBuilderContext.Provider, { value: context },
             React.createElement(Box, { className: QUERY_BUILDER_CLASSNAME },
                 React.createElement(HelpBlock, { "data-name": "query-builder-help", className: "twa:my-2 twa:p-2 twa:text-3" }, "Build the Grid Filter by adding Column Conditions and AND / OR Groups as required"),

package/src/components/ExpressionEditor/QueryBuilder/QueryPredicateBuilder.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Draggable, Droppable } from '../../dnd';
+import { defaultDragProxyMove, DragList } from '../../dnd';
 import { isArgumentColumnOrField, isQlLogicalOperator, } from '../../../parser/src/predicate';
 import { mapColumnDataTypeToExpressionFunctionType } from '../../../Utilities/adaptableQlUtils';
 import { booleanExpressionFunctions } from '../../../Utilities/ExpressionFunctions/booleanExpressionFunctions';
@@ -11,6 +11,7 @@ import SimpleButton from '../../SimpleButton';
 import { CombinatorSelector, ExpressionSelector, PrimitiveValueInput, PrimitiveColumnOrFieldSelector, PrimitiveMultiValueInput, } from './QueryBuilderInputs';
 import { getOperatorMatchingInputs as getFunctionMatchingInputTypes, mapExpressionToFieldValue, } from './utils';
 import { Box, Flex } from '../../Flex';
+import clsx from 'clsx';
 const ITEM_HEIGHT = 40;
 const BASE_CLASS_NAME = 'ab-QueryBuilder-predicate-editor';
 const Handle = (props) => (React.createElement(Flex, { className: `${BASE_CLASS_NAME}__handle twa:mr-1`, style: { height: ITEM_HEIGHT }, alignItems: "center", ...props },
@@ -35,8 +36,12 @@ const LogicalFunctionEditor = (props) => {
     ${props.lastChild ? `${BASE_CLASS_NAME}--last-child` : ''}
     ${props.isRoot ? `${BASE_CLASS_NAME}--root` : `${BASE_CLASS_NAME}--child`}
   `;
-    const getCombinatorEl = (handleProps, className) => (React.createElement(Droppable, { droppableId: props.id, type: props.id }, (provided, snapshot) => {
-        return (React.createElement("div", { ...provided.droppableProps, ref: provided.innerRef, className: className },
+    const handleDrop = (sortedIndexes) => {
+        const newArgs = sortedIndexes.map((i) => props.predicate.args[i]);
+        props.onChange({ ...props.predicate, args: newArgs });
+    };
+    const getCombinatorEl = (handleProps) => (React.createElement(DragList, { dragListId: props.id, orientation: "vertical", onDrop: handleDrop, onDragProxyMove: defaultDragProxyMove }, (listDomProps) => {
+        return (React.createElement("div", { ...listDomProps, className: clsx(listDomProps.className) },
             React.createElement(Flex, null,
                 props.isRoot ? null : React.createElement(Handle, { ...handleProps }),
                 React.createElement(Flex, { className: "twa:flex-1", alignItems: "center", height: ITEM_HEIGHT },
@@ -94,21 +99,18 @@ const LogicalFunctionEditor = (props) => {
                             });
                         } }));
                 }),
-                provided.placeholder,
                 React.createElement("div", { className: `${BASE_CLASS_NAME}__root-actions` },
                     React.createElement(QueryPredicateButtons, { ...props, hideDelete: true })))));
     }));
     if (props.isRoot) {
-        return getCombinatorEl({ className: className });
-    }
-    else {
-        return (React.createElement(Draggable, { key: props.id, draggableId: props.id, index: props.index }, (provided, snapshot) => {
-            return (React.createElement("div", { ...provided.draggableProps, ref: provided.innerRef, className: className }, getCombinatorEl(provided.dragHandleProps)));
-        }));
+        return getCombinatorEl({ className });
     }
+    return (React.createElement(DragList.DraggableItem, { id: props.id }, (itemDomProps) => {
+        const { onPointerDown, ...restDomProps } = itemDomProps;
+        return (React.createElement("div", { ...restDomProps, className: clsx(className, restDomProps.className) }, getCombinatorEl({ onPointerDown })));
+    }));
 };
 const PrimitiveFunctionEditor = (props) => {
-    // [handle] [column] [operator-dropdown] [...args] [delete-button] [plus-button]
     const adaptable = useAdaptable();
     const [columnOrFieldExpression, ...restOfArgs] = props.predicate.args;
     const columnOrField = columnOrFieldExpression;
@@ -116,15 +118,12 @@ const PrimitiveFunctionEditor = (props) => {
     let columnOrFieldDataType = null;
     let columnInputDataType = null;
     let functionInputInputDataTypes = null;
-    // Thsese are the type of inputs ommiting the column
-    // [[column-data-type], number, number]
     let restOfFunctionInputDataTypes = [];
     if (columnOrField) {
         if (!isArgumentColumnOrField(columnOrField)) {
             return React.createElement(ErrorBox, null, "Expression must start with a column or a filed!");
         }
         if (columnOrField.includes('FIELD')) {
-            // we let the full expression so we can difirienciate between column and field
             columnOrFieldId = columnOrField;
             const fieldValue = mapExpressionToFieldValue(columnOrField);
             columnOrFieldDataType = adaptable.api.expressionApi.internalApi.getFieldType(fieldValue);
@@ -141,9 +140,10 @@ const PrimitiveFunctionEditor = (props) => {
             : [];
     }
     const level = props.id.split('/').length - 1;
-    return (React.createElement(Draggable, { key: props.id, draggableId: props.id, index: props.index }, (provided) => {
-        return (React.createElement(Flex, { className: `twa:pb-2 ${BASE_CLASS_NAME} ${BASE_CLASS_NAME}-level-${level} ${BASE_CLASS_NAME}-primitive ${props.lastChild ? `${BASE_CLASS_NAME}--last-child` : ''} `, ref: provided.innerRef, ...provided.draggableProps, style: { ...provided.draggableProps.style, minHeight: ITEM_HEIGHT } },
-            React.createElement(Handle, { ...provided.dragHandleProps }),
+    return (React.createElement(DragList.DraggableItem, { id: props.id }, (itemDomProps) => {
+        const { onPointerDown, ...restDomProps } = itemDomProps;
+        return (React.createElement(Flex, { ...restDomProps, className: clsx(`twa:pb-2 ${BASE_CLASS_NAME} ${BASE_CLASS_NAME}-level-${level} ${BASE_CLASS_NAME}-primitive ${props.lastChild ? `${BASE_CLASS_NAME}--last-child` : ''}`, restDomProps.className), style: { minHeight: ITEM_HEIGHT } },
+            React.createElement(Handle, { onPointerDown: onPointerDown }),
             React.createElement(Flex, { alignItems: "center", style: { height: ITEM_HEIGHT } },
                 React.createElement(Box, { className: "twa:mr-2" },
                     React.createElement(PrimitiveColumnOrFieldSelector, { onChange: (colOrField) => {
@@ -161,7 +161,6 @@ const PrimitiveFunctionEditor = (props) => {
                         props.onChange({
                             ...props.predicate,
                             operator,
-                            // discard arguments
                             args,
                         });
                     }, value: props.predicate.operator })),
@@ -182,7 +181,6 @@ const PrimitiveFunctionEditor = (props) => {
                     }
                     return (React.createElement(PrimitiveValueInput, { ...commonProps, key: key, value: restOfArgs[index] ?? null, onChange: (value) => {
                             const args = [...props.predicate.args];
-                            // +1 because col is the first argument
                             args[index + 1] = value;
                             props.onChange({
                                 ...props.predicate,

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AdaptableApi, AdaptableColumn, AdaptableField, AdaptableModule, NamedQuery } from '../../types';
+import { AdaptableApi, AdaptableColumn, AdaptableField, AdaptableModule, ColumnScope, NamedQuery } from '../../types';
 export type ExpressionEditorType = 'boolean' | 'scalar' | 'observable' | 'aggregatedBoolean' | 'aggregatedScalar' | 'cumulativeAggregatedScalar' | 'quantileAggregatedScalar';
 interface ExpressionEditorProps {
     value: string;
@@ -19,6 +19,7 @@ interface ExpressionEditorProps {
     api: AdaptableApi;
     showQueryBuilder?: boolean;
     showExpressionEditor?: boolean;
+    columnScope?: ColumnScope;
 }
 export declare const baseClassName = "ab-ExpressionEditor";
 export declare function ExpressionEditor(props: ExpressionEditorProps): React.JSX.Element;

package/src/components/ExpressionEditor/index.js

@@ -35,7 +35,7 @@ export function ExpressionEditor(props) {
     // 'boolean','scalar','aggregatedScalar'/'cumulativeAggregatedScalar'/'quantileAggregatedScalar'
     (React.createElement(
         EditorInput,
-        { type: type, module: module, value: props.value, onChange: (value) => {
+        { type: type, module: module, columnScope: props.columnScope, value: props.value, onChange: (value) => {
                 setExpressionText(value);
                 props.onChange(value);
             }, testData: props.initialData, isFullExpression: props.isFullExpression, api: props.api }