@adaptabletools/adaptable 22.0.10 → 22.1.0-canary.0

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 }

package/src/components/Tree/TreeDropdown/index.js

@@ -5,7 +5,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import OverlayTrigger from '../../OverlayTrigger';
 import NotifyResize from '../../NotifyResize';
 import Input from '../../Input';
-import { TreeSelectionState, withSelectedLeafNodesOnly, } from '../../InfiniteTable';
+import { TreeSelectionState, useDataSourceState, withSelectedLeafNodesOnly, } from '../../InfiniteTable';
 import SimpleButton from '../../SimpleButton';
 import { CheckBox } from '../../CheckBox';
 import { useLatest } from '../../utils/useLatest';
@@ -59,35 +59,46 @@ const getLabelColumn = (field, { includeExpandCollapseButton }) => {
                 } }));
         },
         renderHeader: ({ dataSourceApi, api, allRowsSelected, someRowsSelected }) => {
-            const { treeApi } = dataSourceApi;
-            const allFirstLevelCollapsed = dataSourceApi
-                .getOriginalDataArray()
-                .every((item) => !treeApi.isNodeExpanded([item.id]));
-            return (React.createElement(Flex, { flexDirection: 'row', alignItems: 'center', className: "twa:w-full", onMouseDown: (e) => {
-                    // so we can keep the focus on the Grid
-                    e.preventDefault();
-                } },
-                React.createElement(CheckBox, { checked: someRowsSelected && !allRowsSelected ? null : allRowsSelected, className: "twa:mr-2", onChange: () => {
-                        if (allRowsSelected) {
-                            dataSourceApi.treeApi.deselectAll();
-                        }
-                        else {
-                            dataSourceApi.treeApi.selectAll();
-                        }
-                        api.focus();
-                    } }, allRowsSelected ? '(Deselect All)' : '(Select All)'),
-                React.createElement(Flex, { className: "twa:flex-1" }),
-                includeExpandCollapseButton ? (React.createElement(SimpleButton, { label: "toggle-expand-collapse", icon: allFirstLevelCollapsed ? 'expand-all' : 'collapse-all', onMouseDown: () => {
-                        if (allFirstLevelCollapsed) {
-                            dataSourceApi.treeApi.expandAll();
-                        }
-                        else {
-                            dataSourceApi.treeApi.collapseAll();
-                        }
-                    }, iconPosition: "end" })) : null));
+            return (React.createElement(CustomHeader, { dataSourceApi: dataSourceApi, api: api, allRowsSelected: allRowsSelected, someRowsSelected: someRowsSelected, includeExpandCollapseButton: includeExpandCollapseButton }));
         },
     };
 };
+function useAllFirstLevelCollapsed(treeApi) {
+    const { originalDataArray } = useDataSourceState((state) => {
+        return {
+            originalDataArray: state.originalDataArray,
+            treeExpandState: state.treeExpandState,
+        };
+    });
+    return originalDataArray.every((item) => !treeApi.isNodeExpanded([item.id]));
+}
+function CustomHeader({ dataSourceApi, api, allRowsSelected, someRowsSelected, includeExpandCollapseButton, }) {
+    const { treeApi } = dataSourceApi;
+    const allFirstLevelCollapsed = useAllFirstLevelCollapsed(treeApi);
+    const checked = someRowsSelected && !allRowsSelected ? null : allRowsSelected;
+    return (React.createElement(Flex, { flexDirection: 'row', alignItems: 'center', className: "twa:w-full", onMouseDown: (e) => {
+            // so we can keep the focus on the Grid
+            e.preventDefault();
+        } },
+        React.createElement(CheckBox, { checked: checked, className: "twa:mr-2", onChange: () => {
+                if (allRowsSelected) {
+                    dataSourceApi.treeApi.deselectAll();
+                }
+                else {
+                    dataSourceApi.treeApi.selectAll();
+                }
+                api.focus();
+            } }, allRowsSelected ? '(Deselect All)' : '(Select All)'),
+        React.createElement(Flex, { className: "twa:flex-1" }),
+        includeExpandCollapseButton ? (React.createElement(SimpleButton, { label: "toggle-expand-collapse", icon: allFirstLevelCollapsed ? 'expand-all' : 'collapse-all', onMouseDown: () => {
+                if (allFirstLevelCollapsed) {
+                    dataSourceApi.treeApi.expandAll();
+                }
+                else {
+                    dataSourceApi.treeApi.collapseAll();
+                }
+            }, iconPosition: "end" })) : null));
+}
 const sizeFull = {
     width: '100%',
     height: '100%',

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

@@ -1,13 +1,3 @@
-import * as React from 'react';
-import { DropResult, Draggable, DroppableProps, DragDropContextProps } from '@adaptabletools/react-beautiful-dnd';
-/**
- * We're doing all this because the placeholder is not correctly displayed in react-beautiful-dnd
- * with React 19.
- * So we make sure it properly occupies the space of the dragged item, so the
- * container won't flicker when we're dragging an item (as the drag item receives
- * position: fixed while dragging, so content does not have the initial height anymore, therefore,
- * the placeholder is included, with the computed height of the dragging element)
- */
-declare const Droppable: (props: DroppableProps) => React.JSX.Element;
-declare const DragDropContext: (props: DragDropContextProps) => React.JSX.Element;
-export { type DropResult, Draggable, Droppable, DragDropContext };
+import { DragProxyMoveParams } from '@infinite-table/infinite-react';
+export { DragDropProvider, DragList, useDragDropProvider, useDragListContext, DRAG_ITEM_ATTRIBUTE, type DragListProps, type DragDropSourceAndTarget, } from '@infinite-table/infinite-react';
+export declare function defaultDragProxyMove({ proxyElement, dx, dy }: DragProxyMoveParams): void;